From 99710ef717c2e8ba9fa49ca9918d382df704a8ad Mon Sep 17 00:00:00 2001 From: Bas Meeuwissen Date: Wed, 8 Mar 2023 11:16:41 +0100 Subject: [PATCH 1/2] Implemented the example --- README.md | 2 + examples/4-integrations/4-lit/.gitignore | 24 ++ examples/4-integrations/4-lit/README.md | 214 ++++++++++++++++++ examples/4-integrations/4-lit/index.html | 16 ++ examples/4-integrations/4-lit/jitar.json | 16 ++ examples/4-integrations/4-lit/package.json | 29 +++ examples/4-integrations/4-lit/public/vite.svg | 1 + .../4-integrations/4-lit/src/assets/lit.svg | 1 + examples/4-integrations/4-lit/src/index.css | 39 ++++ examples/4-integrations/4-lit/src/jitar.ts | 6 + .../4-integrations/4-lit/src/my-element.ts | 113 +++++++++ .../4-lit/src/server.segment.json | 3 + .../4-lit/src/shared/sayHello.ts | 6 + .../4-integrations/4-lit/src/vite-env.d.ts | 1 + examples/4-integrations/4-lit/tsconfig.json | 24 ++ .../4-integrations/4-lit/tsconfig.node.json | 9 + examples/4-integrations/4-lit/types/jitar.js | 42 ++++ .../4-lit/types/my-element.d.ts | 12 + .../4-integrations/4-lit/types/my-element.js | 51 +++++ .../4-lit/types/shared/sayHello.d.ts | 1 + .../4-lit/types/shared/sayHello.js | 44 ++++ examples/4-integrations/4-lit/vite.config.ts | 25 ++ package-lock.json | 64 +++++- package.json | 3 +- 24 files changed, 744 insertions(+), 2 deletions(-) create mode 100644 examples/4-integrations/4-lit/.gitignore create mode 100644 examples/4-integrations/4-lit/README.md create mode 100644 examples/4-integrations/4-lit/index.html create mode 100644 examples/4-integrations/4-lit/jitar.json create mode 100644 examples/4-integrations/4-lit/package.json create mode 100644 examples/4-integrations/4-lit/public/vite.svg create mode 100644 examples/4-integrations/4-lit/src/assets/lit.svg create mode 100644 examples/4-integrations/4-lit/src/index.css create mode 100644 examples/4-integrations/4-lit/src/jitar.ts create mode 100644 examples/4-integrations/4-lit/src/my-element.ts create mode 100644 examples/4-integrations/4-lit/src/server.segment.json create mode 100644 examples/4-integrations/4-lit/src/shared/sayHello.ts create mode 100644 examples/4-integrations/4-lit/src/vite-env.d.ts create mode 100644 examples/4-integrations/4-lit/tsconfig.json create mode 100644 examples/4-integrations/4-lit/tsconfig.node.json create mode 100644 examples/4-integrations/4-lit/types/jitar.js create mode 100644 examples/4-integrations/4-lit/types/my-element.d.ts create mode 100644 examples/4-integrations/4-lit/types/my-element.js create mode 100644 examples/4-integrations/4-lit/types/shared/sayHello.d.ts create mode 100644 examples/4-integrations/4-lit/types/shared/sayHello.js create mode 100644 examples/4-integrations/4-lit/vite.config.ts diff --git a/README.md b/README.md index 26aa9d20..402e9d2c 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,8 @@ There are more practical [examples](examples/README.md) in the repository. Pract Jitar provides integration examples for the following frontend frameworks: - [React](examples/4-integrations/1-react/README.md) - [Vue](examples/4-integrations/2-vue/README.md) +- [Svelte](examples/4-integrations/3-svelte/README.md) +- [Lit](examples/4-integrations/4-lit/README.md) We are working on integrations with more frontend and meta frameworks, so this list will grow over time. diff --git a/examples/4-integrations/4-lit/.gitignore b/examples/4-integrations/4-lit/.gitignore new file mode 100644 index 00000000..a547bf36 --- /dev/null +++ b/examples/4-integrations/4-lit/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/examples/4-integrations/4-lit/README.md b/examples/4-integrations/4-lit/README.md new file mode 100644 index 00000000..42cce9dc --- /dev/null +++ b/examples/4-integrations/4-lit/README.md @@ -0,0 +1,214 @@ +# lit-jitar + +The example contains a step-by-step guide to integrate Jitar with Lit using Vite. + +## Step 1: Setup a Lit Project + +For creating the Lit app, use Vite with the `lit-ts` template. + +```bash +npm create -y vite@latest lit-jitar -- --template lit-ts +cd lit-jitar +npm install +npm run dev +``` + +When opening http://localhost:5173/ in a web browser it should show the Lit and Vite logos. + +Next, the app will be extended by adding a simple function that generates a welcome message. To hook Jitar later in the app, a shared folder needs to be created in the src folder. This folder holds all components that are shared between the client and server. + +```bash +cd src +mkdir shared +``` + +Now, the first shared function needs to be created. Call it `sayHello` and give it the following content. + +```ts +// src/shared/sayHello.ts +export async function sayHello(name: string): Promise +{ + return `Hello, ${name}!`; +} +``` + +Note that this function is async. This is an important addition that makes the function distributable across the network. + +Use this function to welcome you. To do so, constructor of a component will be used. Update the `my-element.ts` file to use the new function. This is a very simple example but feel free to extend it. + +```ts +import { LitElement, css, html } from 'lit' +import { customElement, property } from 'lit/decorators.js' +import litLogo from './assets/lit.svg' +import { sayHello } from './shared/sayHello'; + +@customElement('my-element') +export class MyElement extends LitElement +{ + @property({ type: String }) + message = ''; + + constructor() + { + super(); + + sayHello('Lit + Vite + Jitar').then((message: string) => this.message = message); + } + + render() + { + return html` +
+ + + + + + +
+

${this.message}

+ ` + } + + // rest of the file +``` + +After saving the file, the browser should show the welcome message. + +The function currently lives and runs on the client. Next, it will be moved to the server without touching a single line of code. + +## Step 2: Add Jitar to the Project + +To use Jitar as runtime, add its Node.js server as a dependency. + +```bash +npm install jitar-nodejs-server +``` + +For easy integration with web apps, a Vite plugin is available. + +```bash +npm install --save-dev jitar-vite-plugin +``` + +To enable the plugin, it needs to be added to the Vite config file. We also need to tell rollup to copy the index.html for the production build. + +```ts +// vite.config.ts +import { resolve } from 'path' +import { defineConfig } from 'vite' +import jitar from 'jitar-vite-plugin' + +// https://vitejs.dev/config/ +export default defineConfig(({ command, mode }) => +{ + return { + plugins: [ + jitar('src', 'shared', 'http://localhost:3000') + ], + build: { + lib: { + entry: 'src/my-element.ts', + formats: ['es'], + }, + rollupOptions: { + external: mode === "production" ? "" : /^lit/, + input: { + main: resolve(__dirname, 'index.html'), + } + }, + }, + } +}) + +``` + +The three parameters set the `root source` folder, the shared components folder (relative to the root folder), and the URL of the Jitar server. + +Vite is now all set up, time for the configuration of Jitar. For this, two JSON files are required. The first is the server configuration. This simple example doesn’t need the [cluster options](https://docs.jitar.dev/03_runtime_services) provided by Jitar, so a simple standalone setup will be used. Create a new file in the project root (outside the source root) with the name jitar.json and the following content: + +```json +{ + "url": "http://127.0.0.1:3000", + "standalone": { + "source": "./dist", + "cache": "./cache", + "index": "index.html", + "assets": [ "index.html", "4-lit.js", "my-element.js", "style.css", "vite.svg", "assets/**/*" ] + } +} +``` + +This configuration tells Jitar to read the compiled JavaScript from the dist folder and write its `cache` to the cache folder. It serves the `index.html` file when accessing it with a web browser. The `assets` whitelist the files that are accessible from the outside world. Other files will be hidden by default. + +The second configuration is a [segment configuration](https://docs.jitar.dev/04_basic_features#segmentation). A segment defines the components grouped to form a deployable package. For example, you only need a single segment to place the function on the server. Create a new file in the project root with the name `server.segment.json` and the following content. + +```ts +{ + "./shared/sayHello.js": { "sayHello": { "access": "public" } } +} +``` + +The structure of a segment file is very similar to the JavaScript module system. In this case, Jitar imports `sayHello` from `./shared/sayHello.js`. Additionally, the access is set to public (private by default). + +Note that the file path is relative to the source root of the application and that it imports the compiled JavaScript file (ends with .js). + +That’s almost it. The only thing that’s missing is a bootstrapper for starting a Jitar server. For this, add a new code file to the source root folder. Here’s what that looks like: + +```ts +// src/jitar.ts +import { startServer } from 'jitar-nodejs-server'; + +const moduleImporter = async (specifier: string) => import(specifier); + +startServer(moduleImporter); +``` + +With the start of a server, Jitar needs a module importer that imports Node dependencies from the local application context instead of the Jitar context. + +## Step 3: Build and Run + +With Jitar all set up, get ready for its first run. The current plugin implementation requires some additional configuration which will be optimised in later versions. + +The `tsconfig.js` file needs to be updated with the following properties. + +```js +/* tsconfig.json */ +{ + "compilerOptions": + { + /* other properties */ + "declaration": false, /* update */ + "emitDeclarationOnly": false, /* update */ + "outDir": "dist", /* update this property */ + "noEmit": false, /* add this property */ + } +} +``` + +In the package.json file, the build script needs to be updated to include the TypeScript compiler. This is required to compile the Jitar bootstrapper and the shared functions. + +```json +"build": "vite build && tsc", +``` + +Lastly, add the following script for starting the Jitar server. + +```json +"jitar": "node --experimental-network-imports --experimental-fetch dist/jitar.js --config=jitar.json" +``` + +And that's it. The server has been configured and is ready to go. Both scripts can be executed with the following commands: + +```bash +npm run build +npm run jitar +``` + +Note that the function has been registered successfully by Jitar. This means that it has moved from the client to the server. Run the app by navigating to http://localhost:3000/. The Jitar log should indicate that it has run our function. + +When inspecting the network traffic of the browser (in the developer tools), an API request to the server should be visible, indicating that the function is called from the server. + +Congratulations! The app just executed a fully automated API. From here, the app can be extended with more functions. + +Note that port 3000 is running the deployable version of the app. It’s also possible to start Vite in dev mode by running `npm run dev` again. Keep in mind that Jitar needs to run in the background. Otherwise, the server functions won’t be available. diff --git a/examples/4-integrations/4-lit/index.html b/examples/4-integrations/4-lit/index.html new file mode 100644 index 00000000..fdee573d --- /dev/null +++ b/examples/4-integrations/4-lit/index.html @@ -0,0 +1,16 @@ + + + + + + + Vite + Lit + TS + + + + + +

Vite + Lit

+ + + diff --git a/examples/4-integrations/4-lit/jitar.json b/examples/4-integrations/4-lit/jitar.json new file mode 100644 index 00000000..287e2503 --- /dev/null +++ b/examples/4-integrations/4-lit/jitar.json @@ -0,0 +1,16 @@ +{ + "url": "http://127.0.0.1:3000", + "standalone": { + "source": "./dist", + "cache": "./cache", + "index": "index.html", + "assets": [ + "index.html", + "4-lit.js", + "my-element.js", + "style.css", + "vite.svg", + "assets/**/*" + ] + } +} \ No newline at end of file diff --git a/examples/4-integrations/4-lit/package.json b/examples/4-integrations/4-lit/package.json new file mode 100644 index 00000000..734aa666 --- /dev/null +++ b/examples/4-integrations/4-lit/package.json @@ -0,0 +1,29 @@ +{ + "name": "4-lit", + "private": true, + "version": "0.0.0", + "type": "module", + "main": "dist/my-element.es.js", + "exports": { + ".": "./dist/my-element.es.js" + }, + "types": "types/my-element.d.ts", + "files": [ + "dist", + "types" + ], + "scripts": { + "dev": "vite", + "build": "vite build && tsc", + "jitar": "node --experimental-network-imports --experimental-fetch dist/jitar.js --config=jitar.json" + }, + "dependencies": { + "jitar-nodejs-server": "^0.3.8", + "lit": "^2.6.1" + }, + "devDependencies": { + "jitar-vite-plugin": "^0.3.7", + "typescript": "^4.9.3", + "vite": "^4.1.0" + } +} \ No newline at end of file diff --git a/examples/4-integrations/4-lit/public/vite.svg b/examples/4-integrations/4-lit/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/examples/4-integrations/4-lit/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/4-integrations/4-lit/src/assets/lit.svg b/examples/4-integrations/4-lit/src/assets/lit.svg new file mode 100644 index 00000000..4a9c1fe6 --- /dev/null +++ b/examples/4-integrations/4-lit/src/assets/lit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/4-integrations/4-lit/src/index.css b/examples/4-integrations/4-lit/src/index.css new file mode 100644 index 00000000..446731c9 --- /dev/null +++ b/examples/4-integrations/4-lit/src/index.css @@ -0,0 +1,39 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } +} diff --git a/examples/4-integrations/4-lit/src/jitar.ts b/examples/4-integrations/4-lit/src/jitar.ts new file mode 100644 index 00000000..3ac098da --- /dev/null +++ b/examples/4-integrations/4-lit/src/jitar.ts @@ -0,0 +1,6 @@ +// src/jitar.ts +import { startServer } from 'jitar-nodejs-server'; + +const moduleImporter = async (specifier: string) => import(specifier); + +startServer(moduleImporter); \ No newline at end of file diff --git a/examples/4-integrations/4-lit/src/my-element.ts b/examples/4-integrations/4-lit/src/my-element.ts new file mode 100644 index 00000000..968ee766 --- /dev/null +++ b/examples/4-integrations/4-lit/src/my-element.ts @@ -0,0 +1,113 @@ +import { LitElement, css, html } from 'lit' +import { customElement, property } from 'lit/decorators.js' +import litLogo from './assets/lit.svg' +import { sayHello } from './shared/sayHello'; + +@customElement('my-element') +export class MyElement extends LitElement +{ + @property({ type: String }) + message = ''; + + constructor() + { + super(); + + sayHello('Lit + Vite + Jitar').then((message: string) => this.message = message); + } + + render() + { + return html` +
+ + + + + + +
+

${this.message}

+ ` + } + + static styles = css` + :host { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; + } + + .logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; + } + .logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); + } + .logo.lit:hover { + filter: drop-shadow(0 0 2em #325cffaa); + } + + .card { + padding: 2em; + } + + .read-the-docs { + color: #888; + } + + h1 { + font-size: 3.2em; + line-height: 1.1; + } + + a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; + } + a:hover { + color: #535bf2; + } + + button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; + } + button:hover { + border-color: #646cff; + } + button:focus, + button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; + } + + @media (prefers-color-scheme: light) { + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } + } + ` +} + +declare global +{ + interface HTMLElementTagNameMap + { + 'my-element': MyElement + } +} diff --git a/examples/4-integrations/4-lit/src/server.segment.json b/examples/4-integrations/4-lit/src/server.segment.json new file mode 100644 index 00000000..b2023517 --- /dev/null +++ b/examples/4-integrations/4-lit/src/server.segment.json @@ -0,0 +1,3 @@ +{ + "./shared/sayHello.js": { "sayHello": { "access": "public" } } +} \ No newline at end of file diff --git a/examples/4-integrations/4-lit/src/shared/sayHello.ts b/examples/4-integrations/4-lit/src/shared/sayHello.ts new file mode 100644 index 00000000..ff57eb9a --- /dev/null +++ b/examples/4-integrations/4-lit/src/shared/sayHello.ts @@ -0,0 +1,6 @@ + +// src/shared/sayHello.ts +export async function sayHello(name: string): Promise +{ + return `Hello, ${name}!`; +} diff --git a/examples/4-integrations/4-lit/src/vite-env.d.ts b/examples/4-integrations/4-lit/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/4-integrations/4-lit/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/4-integrations/4-lit/tsconfig.json b/examples/4-integrations/4-lit/tsconfig.json new file mode 100644 index 00000000..63a51d8c --- /dev/null +++ b/examples/4-integrations/4-lit/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "declaration": false, /* update this property */ + "emitDeclarationOnly": false, /* update this property */ + "outDir": "dist", /* update this property */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "moduleResolution": "Node", + "isolatedModules": true, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "forceConsistentCasingInFileNames": true, + "useDefineForClassFields": false, + "skipLibCheck": true, + "noEmit": false, /* add this property */ + }, + "include": ["src/**/*.ts"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/4-integrations/4-lit/tsconfig.node.json b/examples/4-integrations/4-lit/tsconfig.node.json new file mode 100644 index 00000000..9d31e2ae --- /dev/null +++ b/examples/4-integrations/4-lit/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/4-integrations/4-lit/types/jitar.js b/examples/4-integrations/4-lit/types/jitar.js new file mode 100644 index 00000000..f9c0aa36 --- /dev/null +++ b/examples/4-integrations/4-lit/types/jitar.js @@ -0,0 +1,42 @@ +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +// src/jitar.ts +import { startServer } from 'jitar-nodejs-server'; +var moduleImporter = function (specifier) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) { + return [2 /*return*/, import(specifier)]; +}); }); }; +startServer(moduleImporter); diff --git a/examples/4-integrations/4-lit/types/my-element.d.ts b/examples/4-integrations/4-lit/types/my-element.d.ts new file mode 100644 index 00000000..130e8410 --- /dev/null +++ b/examples/4-integrations/4-lit/types/my-element.d.ts @@ -0,0 +1,12 @@ +import { LitElement } from 'lit'; +export declare class MyElement extends LitElement { + message: string; + constructor(); + render(): import("lit-html").TemplateResult<1>; + static styles: import("lit").CSSResult; +} +declare global { + interface HTMLElementTagNameMap { + 'my-element': MyElement; + } +} diff --git a/examples/4-integrations/4-lit/types/my-element.js b/examples/4-integrations/4-lit/types/my-element.js new file mode 100644 index 00000000..92ab5b3d --- /dev/null +++ b/examples/4-integrations/4-lit/types/my-element.js @@ -0,0 +1,51 @@ +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + if (typeof b !== "function" && b !== null) + throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { + if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } + return cooked; +}; +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +import { LitElement, css, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import litLogo from './assets/lit.svg'; +import { sayHello } from './shared/sayHello'; +var MyElement = /** @class */ (function (_super) { + __extends(MyElement, _super); + function MyElement() { + var _this = _super.call(this) || this; + _this.message = ''; + sayHello('Lit + Vite + Jitar').then(function (message) { return _this.message = message; }); + return _this; + } + MyElement.prototype.render = function () { + return html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
\n \n \"Vite\n \n \n \n \n
\n

", "

\n "], ["\n
\n \n \"Vite\n \n \n \n \n
\n

", "

\n "])), litLogo, this.message); + }; + MyElement.styles = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n :host {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n }\n\n .logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n }\n .logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n }\n .logo.lit:hover {\n filter: drop-shadow(0 0 2em #325cffaa);\n }\n\n .card {\n padding: 2em;\n }\n\n .read-the-docs {\n color: #888;\n }\n\n h1 {\n font-size: 3.2em;\n line-height: 1.1;\n }\n\n a {\n font-weight: 500;\n color: #646cff;\n text-decoration: inherit;\n }\n a:hover {\n color: #535bf2;\n }\n\n button {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n transition: border-color 0.25s;\n }\n button:hover {\n border-color: #646cff;\n }\n button:focus,\n button:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n }\n\n @media (prefers-color-scheme: light) {\n a:hover {\n color: #747bff;\n }\n button {\n background-color: #f9f9f9;\n }\n }\n "], ["\n :host {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n }\n\n .logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n }\n .logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n }\n .logo.lit:hover {\n filter: drop-shadow(0 0 2em #325cffaa);\n }\n\n .card {\n padding: 2em;\n }\n\n .read-the-docs {\n color: #888;\n }\n\n h1 {\n font-size: 3.2em;\n line-height: 1.1;\n }\n\n a {\n font-weight: 500;\n color: #646cff;\n text-decoration: inherit;\n }\n a:hover {\n color: #535bf2;\n }\n\n button {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n transition: border-color 0.25s;\n }\n button:hover {\n border-color: #646cff;\n }\n button:focus,\n button:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n }\n\n @media (prefers-color-scheme: light) {\n a:hover {\n color: #747bff;\n }\n button {\n background-color: #f9f9f9;\n }\n }\n "]))); + __decorate([ + property({ type: String }) + ], MyElement.prototype, "message"); + MyElement = __decorate([ + customElement('my-element') + ], MyElement); + return MyElement; +}(LitElement)); +export { MyElement }; +var templateObject_1, templateObject_2; diff --git a/examples/4-integrations/4-lit/types/shared/sayHello.d.ts b/examples/4-integrations/4-lit/types/shared/sayHello.d.ts new file mode 100644 index 00000000..ed6fde17 --- /dev/null +++ b/examples/4-integrations/4-lit/types/shared/sayHello.d.ts @@ -0,0 +1 @@ +export declare function sayHello(name: string): Promise; diff --git a/examples/4-integrations/4-lit/types/shared/sayHello.js b/examples/4-integrations/4-lit/types/shared/sayHello.js new file mode 100644 index 00000000..7e3aaa2f --- /dev/null +++ b/examples/4-integrations/4-lit/types/shared/sayHello.js @@ -0,0 +1,44 @@ +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +// src/shared/sayHello.ts +export function sayHello(name) { + return __awaiter(this, void 0, void 0, function () { + return __generator(this, function (_a) { + return [2 /*return*/, "Hello, ".concat(name, "!")]; + }); + }); +} diff --git a/examples/4-integrations/4-lit/vite.config.ts b/examples/4-integrations/4-lit/vite.config.ts new file mode 100644 index 00000000..5b427214 --- /dev/null +++ b/examples/4-integrations/4-lit/vite.config.ts @@ -0,0 +1,25 @@ +import { resolve } from 'path' +import { defineConfig } from 'vite' +import jitar from 'jitar-vite-plugin' + +// https://vitejs.dev/config/ +export default defineConfig(({ command, mode }) => +{ + return { + plugins: [ + jitar('src', 'shared', 'http://localhost:3000') + ], + build: { + lib: { + entry: 'src/my-element.ts', + formats: ['es'], + }, + rollupOptions: { + external: mode === "production" ? "" : /^lit/, + input: { + main: resolve(__dirname, 'index.html'), + } + }, + }, + } +}) diff --git a/package-lock.json b/package-lock.json index d396e2e4..75fd89b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,7 +29,8 @@ "examples/3-apps/2-microservices", "examples/4-integrations/1-react", "examples/4-integrations/2-vue", - "examples/4-integrations/3-svelte" + "examples/4-integrations/3-svelte", + "examples/4-integrations/4-lit" ], "devDependencies": { "@types/express": "^4.17.17", @@ -238,6 +239,18 @@ "vite": "^4.1.0" } }, + "examples/4-integrations/4-lit": { + "version": "0.0.0", + "dependencies": { + "jitar-nodejs-server": "^0.3.8", + "lit": "^2.6.1" + }, + "devDependencies": { + "jitar-vite-plugin": "^0.3.7", + "typescript": "^4.9.3", + "vite": "^4.1.0" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "dev": true, @@ -859,6 +872,19 @@ "node": ">=10" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz", + "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw==" + }, + "node_modules/@lit/reactive-element": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.1.tgz", + "integrity": "sha512-va15kYZr7KZNNPZdxONGQzpUr+4sxVu7V/VG7a8mRfPPXUyhEYj5RzXCQmGrlP3tAh0L3HHm5AjBMFYRqlM9SA==", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "dev": true, @@ -1643,6 +1669,11 @@ "@types/node": "*" } }, + "node_modules/@types/trusted-types": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz", + "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==" + }, "node_modules/@types/validator": { "version": "13.7.12", "license": "MIT" @@ -2364,6 +2395,10 @@ "resolved": "examples/4-integrations/3-svelte", "link": true }, + "node_modules/4-lit": { + "resolved": "examples/4-integrations/4-lit", + "link": true + }, "node_modules/abbrev": { "version": "1.1.1", "dev": true, @@ -6493,6 +6528,33 @@ "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } }, + "node_modules/lit": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-2.6.1.tgz", + "integrity": "sha512-DT87LD64f8acR7uVp7kZfhLRrHkfC/N4BVzAtnw9Yg8087mbBJ//qedwdwX0kzDbxgPccWRW6mFwGbRQIxy0pw==", + "dependencies": { + "@lit/reactive-element": "^1.6.0", + "lit-element": "^3.2.0", + "lit-html": "^2.6.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz", + "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.6.1.tgz", + "integrity": "sha512-Z3iw+E+3KKFn9t2YKNjsXNEu/LRLI98mtH/C6lnFg7kvaqPIzPn124Yd4eT/43lyqrejpc5Wb6BHq3fdv4S8Rw==", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/load-json-file": { "version": "6.2.0", "dev": true, diff --git a/package.json b/package.json index 1fbbfe58..ee72b7b6 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "examples/3-apps/2-microservices", "examples/4-integrations/1-react", "examples/4-integrations/2-vue", - "examples/4-integrations/3-svelte" + "examples/4-integrations/3-svelte", + "examples/4-integrations/4-lit" ], "scripts": { "build": "npm run build --workspace=packages/jitar --workspace=packages/jitar-nodejs-server --workspace=/packages/jitar-reflection --workspace=packages/jitar-vite-plugin --if-present", From c6af77a92c3fc5e593fc10e6bd18352faae727f6 Mon Sep 17 00:00:00 2001 From: Bas Meeuwissen Date: Wed, 8 Mar 2023 11:41:19 +0100 Subject: [PATCH 2/2] Cleaned up a bit --- examples/4-integrations/4-lit/index.html | 2 +- .../4-integrations/4-lit/src/my-element.ts | 45 ---------------- examples/4-integrations/4-lit/types/jitar.js | 42 --------------- .../4-lit/types/my-element.d.ts | 12 ----- .../4-integrations/4-lit/types/my-element.js | 51 ------------------- .../4-lit/types/shared/sayHello.d.ts | 1 - .../4-lit/types/shared/sayHello.js | 44 ---------------- 7 files changed, 1 insertion(+), 196 deletions(-) delete mode 100644 examples/4-integrations/4-lit/types/jitar.js delete mode 100644 examples/4-integrations/4-lit/types/my-element.d.ts delete mode 100644 examples/4-integrations/4-lit/types/my-element.js delete mode 100644 examples/4-integrations/4-lit/types/shared/sayHello.d.ts delete mode 100644 examples/4-integrations/4-lit/types/shared/sayHello.js diff --git a/examples/4-integrations/4-lit/index.html b/examples/4-integrations/4-lit/index.html index fdee573d..9e08d00d 100644 --- a/examples/4-integrations/4-lit/index.html +++ b/examples/4-integrations/4-lit/index.html @@ -10,7 +10,7 @@ -

Vite + Lit

+ diff --git a/examples/4-integrations/4-lit/src/my-element.ts b/examples/4-integrations/4-lit/src/my-element.ts index 968ee766..f7ab899d 100644 --- a/examples/4-integrations/4-lit/src/my-element.ts +++ b/examples/4-integrations/4-lit/src/my-element.ts @@ -52,55 +52,10 @@ export class MyElement extends LitElement filter: drop-shadow(0 0 2em #325cffaa); } - .card { - padding: 2em; - } - - .read-the-docs { - color: #888; - } - h1 { font-size: 3.2em; line-height: 1.1; } - - a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; - } - a:hover { - color: #535bf2; - } - - button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; - } - button:hover { - border-color: #646cff; - } - button:focus, - button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; - } - - @media (prefers-color-scheme: light) { - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } - } ` } diff --git a/examples/4-integrations/4-lit/types/jitar.js b/examples/4-integrations/4-lit/types/jitar.js deleted file mode 100644 index f9c0aa36..00000000 --- a/examples/4-integrations/4-lit/types/jitar.js +++ /dev/null @@ -1,42 +0,0 @@ -var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { - function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } - return new (P || (P = Promise))(function (resolve, reject) { - function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } - function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } - function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } - step((generator = generator.apply(thisArg, _arguments || [])).next()); - }); -}; -var __generator = (this && this.__generator) || function (thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; - function verb(n) { return function (v) { return step([n, v]); }; } - function step(op) { - if (f) throw new TypeError("Generator is already executing."); - while (g && (g = 0, op[0] && (_ = 0)), _) try { - if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; - if (y = 0, t) op = [op[0] & 2, t.value]; - switch (op[0]) { - case 0: case 1: t = op; break; - case 4: _.label++; return { value: op[1], done: false }; - case 5: _.label++; y = op[1]; op = [0]; continue; - case 7: op = _.ops.pop(); _.trys.pop(); continue; - default: - if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } - if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } - if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } - if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } - if (t[2]) _.ops.pop(); - _.trys.pop(); continue; - } - op = body.call(thisArg, _); - } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } - if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; - } -}; -// src/jitar.ts -import { startServer } from 'jitar-nodejs-server'; -var moduleImporter = function (specifier) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) { - return [2 /*return*/, import(specifier)]; -}); }); }; -startServer(moduleImporter); diff --git a/examples/4-integrations/4-lit/types/my-element.d.ts b/examples/4-integrations/4-lit/types/my-element.d.ts deleted file mode 100644 index 130e8410..00000000 --- a/examples/4-integrations/4-lit/types/my-element.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { LitElement } from 'lit'; -export declare class MyElement extends LitElement { - message: string; - constructor(); - render(): import("lit-html").TemplateResult<1>; - static styles: import("lit").CSSResult; -} -declare global { - interface HTMLElementTagNameMap { - 'my-element': MyElement; - } -} diff --git a/examples/4-integrations/4-lit/types/my-element.js b/examples/4-integrations/4-lit/types/my-element.js deleted file mode 100644 index 92ab5b3d..00000000 --- a/examples/4-integrations/4-lit/types/my-element.js +++ /dev/null @@ -1,51 +0,0 @@ -var __extends = (this && this.__extends) || (function () { - var extendStatics = function (d, b) { - extendStatics = Object.setPrototypeOf || - ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || - function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; - return extendStatics(d, b); - }; - return function (d, b) { - if (typeof b !== "function" && b !== null) - throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); - extendStatics(d, b); - function __() { this.constructor = d; } - d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); - }; -})(); -var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { - if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } - return cooked; -}; -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; -import { LitElement, css, html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; -import litLogo from './assets/lit.svg'; -import { sayHello } from './shared/sayHello'; -var MyElement = /** @class */ (function (_super) { - __extends(MyElement, _super); - function MyElement() { - var _this = _super.call(this) || this; - _this.message = ''; - sayHello('Lit + Vite + Jitar').then(function (message) { return _this.message = message; }); - return _this; - } - MyElement.prototype.render = function () { - return html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
\n \n \"Vite\n \n \n \n \n
\n

", "

\n "], ["\n
\n \n \"Vite\n \n \n \n \n
\n

", "

\n "])), litLogo, this.message); - }; - MyElement.styles = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n :host {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n }\n\n .logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n }\n .logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n }\n .logo.lit:hover {\n filter: drop-shadow(0 0 2em #325cffaa);\n }\n\n .card {\n padding: 2em;\n }\n\n .read-the-docs {\n color: #888;\n }\n\n h1 {\n font-size: 3.2em;\n line-height: 1.1;\n }\n\n a {\n font-weight: 500;\n color: #646cff;\n text-decoration: inherit;\n }\n a:hover {\n color: #535bf2;\n }\n\n button {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n transition: border-color 0.25s;\n }\n button:hover {\n border-color: #646cff;\n }\n button:focus,\n button:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n }\n\n @media (prefers-color-scheme: light) {\n a:hover {\n color: #747bff;\n }\n button {\n background-color: #f9f9f9;\n }\n }\n "], ["\n :host {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem;\n text-align: center;\n }\n\n .logo {\n height: 6em;\n padding: 1.5em;\n will-change: filter;\n transition: filter 300ms;\n }\n .logo:hover {\n filter: drop-shadow(0 0 2em #646cffaa);\n }\n .logo.lit:hover {\n filter: drop-shadow(0 0 2em #325cffaa);\n }\n\n .card {\n padding: 2em;\n }\n\n .read-the-docs {\n color: #888;\n }\n\n h1 {\n font-size: 3.2em;\n line-height: 1.1;\n }\n\n a {\n font-weight: 500;\n color: #646cff;\n text-decoration: inherit;\n }\n a:hover {\n color: #535bf2;\n }\n\n button {\n border-radius: 8px;\n border: 1px solid transparent;\n padding: 0.6em 1.2em;\n font-size: 1em;\n font-weight: 500;\n font-family: inherit;\n background-color: #1a1a1a;\n cursor: pointer;\n transition: border-color 0.25s;\n }\n button:hover {\n border-color: #646cff;\n }\n button:focus,\n button:focus-visible {\n outline: 4px auto -webkit-focus-ring-color;\n }\n\n @media (prefers-color-scheme: light) {\n a:hover {\n color: #747bff;\n }\n button {\n background-color: #f9f9f9;\n }\n }\n "]))); - __decorate([ - property({ type: String }) - ], MyElement.prototype, "message"); - MyElement = __decorate([ - customElement('my-element') - ], MyElement); - return MyElement; -}(LitElement)); -export { MyElement }; -var templateObject_1, templateObject_2; diff --git a/examples/4-integrations/4-lit/types/shared/sayHello.d.ts b/examples/4-integrations/4-lit/types/shared/sayHello.d.ts deleted file mode 100644 index ed6fde17..00000000 --- a/examples/4-integrations/4-lit/types/shared/sayHello.d.ts +++ /dev/null @@ -1 +0,0 @@ -export declare function sayHello(name: string): Promise; diff --git a/examples/4-integrations/4-lit/types/shared/sayHello.js b/examples/4-integrations/4-lit/types/shared/sayHello.js deleted file mode 100644 index 7e3aaa2f..00000000 --- a/examples/4-integrations/4-lit/types/shared/sayHello.js +++ /dev/null @@ -1,44 +0,0 @@ -var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { - function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } - return new (P || (P = Promise))(function (resolve, reject) { - function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } - function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } - function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } - step((generator = generator.apply(thisArg, _arguments || [])).next()); - }); -}; -var __generator = (this && this.__generator) || function (thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; - function verb(n) { return function (v) { return step([n, v]); }; } - function step(op) { - if (f) throw new TypeError("Generator is already executing."); - while (g && (g = 0, op[0] && (_ = 0)), _) try { - if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; - if (y = 0, t) op = [op[0] & 2, t.value]; - switch (op[0]) { - case 0: case 1: t = op; break; - case 4: _.label++; return { value: op[1], done: false }; - case 5: _.label++; y = op[1]; op = [0]; continue; - case 7: op = _.ops.pop(); _.trys.pop(); continue; - default: - if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } - if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } - if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } - if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } - if (t[2]) _.ops.pop(); - _.trys.pop(); continue; - } - op = body.call(thisArg, _); - } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } - if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; - } -}; -// src/shared/sayHello.ts -export function sayHello(name) { - return __awaiter(this, void 0, void 0, function () { - return __generator(this, function (_a) { - return [2 /*return*/, "Hello, ".concat(name, "!")]; - }); - }); -}