@oicl-lit/gen-wrapper-svelte 0.0.2

package/README.md

@@ -0,0 +1,5 @@
+# @lit-labs/gen-wrapper-svelte
+
+Utility library for generating Svelte wrappers for Lit components.
+
+For a command-line interface to using the generator, see `@lit-labs/cli`.

package/index.js

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import * as path from 'path';
+import { packageJsonTemplate } from './lib/package-json-template.js';
+import { tsconfigTemplate } from './lib/tsconfig-template.js';
+import { wrapperModuleTemplateSFC } from './lib/wrapper-module-template-sfc.js';
+import { viteConfigTemplate } from './lib/vite.config-template.js';
+import { svelteConfigTemplate } from './lib/svelteconf-template.js';
+import { appHtmlTemplate } from './lib/app-html-template.js';
+import { utilTemplate } from './lib/util-template.js';
+export const getCommand = () => {
+    return {
+        name: 'svelte',
+        description: 'Generate Svelte wrapper components from Lit elements',
+        kind: 'resolved',
+        async generate(options) {
+            return generateSvelteWrapper(options.package);
+        },
+    };
+};
+export const generateSvelteWrapper = async (pkg) => {
+    const litModules = pkg.getLitElementModules();
+    if (litModules.length > 0) {
+        // Base the generated package folder name off the analyzed package folder
+        // name, not the npm package name, since that might have an npm org in it
+        const sveltePkgName = packageNameToSveltePackageName(path.basename(pkg.rootDir));
+        const sfcFiles = wrapperSFCFiles(pkg.packageJson, litModules);
+        const moduleNames = Object.keys(sfcFiles).map((f) => {
+            // Need to get module name to include sub path.
+            const dirname = path.dirname(f);
+            const basename = `${path.basename(f, '.vue')}`;
+            const moduleName = path
+                .join(dirname, basename)
+                .replace(/\\/g, '/')
+                .replace(/^src\//, '');
+            return moduleName;
+        });
+        return {
+            [sveltePkgName]: {
+                '.gitignore': gitIgnoreTemplate(moduleNames),
+                '.prettierignore': prettierIgnoreTemplate(),
+                'package.json': packageJsonTemplate(pkg.packageJson),
+                'tsconfig.json': tsconfigTemplate(),
+                'vite.config.ts': viteConfigTemplate(pkg.packageJson),
+                'svelte.config.js': svelteConfigTemplate(),
+                'src/app.html': appHtmlTemplate(),
+                'src/lib/util.ts': utilTemplate(),
+                ...sfcFiles,
+            },
+        };
+    }
+    else {
+        throw new Error('No Lit components were found in this package.');
+    }
+};
+// TODO(kschaaf): Should this be configurable?
+const packageNameToSveltePackageName = (pkgName) => `${pkgName}-svelte`;
+const gitIgnoreTemplate = (moduleNames) => moduleNames.map((f) => `/${f}.*`).join('\n');
+const prettierIgnoreTemplate = () => ['.svelte-kit/', 'dist/', 'node_modules/'].join('\n');
+const getSvelteFileName = (dir, name) => {
+    const dirname = dir.replace(/^src/g, 'src/lib');
+    return path.join(dirname, `${name}.svelte`);
+};
+const wrapperSFCFiles = (packageJson, litModules) => {
+    const wrapperFiles = {};
+    const globalExports = [];
+    for (const { module, declarations } of litModules) {
+        const { sourcePath, jsPath } = module;
+        // Format: [...[name, content]]
+        const wrappers = wrapperModuleTemplateSFC(packageJson, jsPath, declarations);
+        const dir = path.dirname(sourcePath);
+        const exports = [];
+        // TODO(sorvell): Throw if component names are re-used in the same folder.
+        for (const [name, content] of wrappers) {
+            exports.push(`export {default as ${name}} from './${name}.svelte';`);
+            wrapperFiles[getSvelteFileName(dir, name)] = content;
+            const dirname = dir.replace(/^src/g, '');
+            globalExports.push(`export {default as ${name}} from '.${dirname}/${name}.svelte';`);
+        }
+        // Note, if a given source module includes more than component, the author
+        // probably intended to make them available via a single import and this
+        // separate module preserves that intent.
+        if (wrappers.length > 1) {
+            wrapperFiles[sourcePath] = exports.join('/n');
+        }
+    }
+    wrapperFiles['src/lib/index.ts'] = globalExports.join('\n');
+    return wrapperFiles;
+};
+//# sourceMappingURL=index.js.map

package/lib/app-html-template.js

@@ -0,0 +1,18 @@
+import { html } from '@oicl-lit/gen-utils/lib/str-utils.js';
+export const appHtmlTemplate = () => {
+    return html `
+    <!doctype html>
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        %sveltekit.head%
+      </head>
+      <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+      </body>
+    </html>
+  `;
+};
+//# sourceMappingURL=app-html-template.js.map

package/lib/package-json-template.js

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+export const packageJsonTemplate = (pkgJson) => {
+    // Refinement of package.json generation ala the TODOs below tracked in
+    // https://github.com/lit/lit/issues/2855
+    // TODO(kschaaf): spread in/adapt other relevant fields from source
+    // package.json (description, license, keywords, etc.)
+    return JSON.stringify({
+        name: `${pkgJson.name}-svelte`,
+        version: pkgJson.version,
+        scripts: {
+            dev: 'vite dev',
+            build: 'vite build && npm run prepack',
+            preview: 'vite preview',
+            prepare: "svelte-kit sync || echo ''",
+            prepack: 'svelte-kit sync && svelte-package && publint',
+            check: 'svelte-kit sync && svelte-check --tsconfig ./tsconfig.json',
+            'check:watch': 'svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch',
+            format: 'prettier "**/*.{cjs,html,js,json,md,ts,css,svelte}" --write',
+            'format:check': 'prettier "**/*.{cjs,html,js,json,md,ts,css,svelte}" --check',
+        },
+        files: ['dist', '!dist/**/*.test.*', '!dist/**/*.spec.*'],
+        sideEffects: ['**/*.css'],
+        svelte: './dist/index.js',
+        types: './dist/index.d.ts',
+        type: 'module',
+        exports: {
+            '.': {
+                types: './dist/index.d.ts',
+                svelte: './dist/index.js',
+            },
+        },
+        dependencies: {
+            [pkgJson.name]: '^' + pkgJson.version,
+        },
+        peerDependencies: {
+            svelte: '^5.0.0',
+        },
+        devDependencies: {
+            '@sveltejs/adapter-auto': '^7.0.0',
+            '@sveltejs/kit': '^2.48.5',
+            '@sveltejs/package': '^2.5.6',
+            '@sveltejs/vite-plugin-svelte': '^6.2.1',
+            prettier: '^3.8.1',
+            'prettier-plugin-svelte': '^3.5.0',
+            publint: '^0.3.15',
+            svelte: '^5.43.8',
+            'svelte-check': '^4.3.4',
+            typescript: '^5.9.3',
+            vite: '^7.2.2',
+        },
+        prettier: {
+            plugins: ['prettier-plugin-svelte'],
+        },
+        keywords: ['svelte'],
+    }, null, 2);
+};
+//# sourceMappingURL=package-json-template.js.map

package/lib/svelteconf-template.js

@@ -0,0 +1,24 @@
+import { javascript } from '@oicl-lit/gen-utils/lib/str-utils.js';
+export const svelteConfigTemplate = () => {
+    return javascript `
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
+`;
+};
+//# sourceMappingURL=svelteconf-template.js.map

package/lib/tsconfig-template.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+export const tsconfigTemplate = () => {
+    return JSON.stringify({
+        extends: './.svelte-kit/tsconfig.json',
+        compilerOptions: {
+            rewriteRelativeImportExtensions: true,
+            allowJs: true,
+            checkJs: true,
+            forceConsistentCasingInFileNames: true,
+            resolveJsonModule: true,
+            skipLibCheck: true,
+            sourceMap: true,
+            strict: true,
+            module: 'NodeNext',
+            moduleResolution: 'NodeNext',
+        },
+    }, null, 2);
+};
+//# sourceMappingURL=tsconfig-template.js.map

package/lib/util-template.js

@@ -0,0 +1,32 @@
+import { javascript } from '@oicl-lit/gen-utils/lib/str-utils.js';
+export const utilTemplate = () => javascript `
+
+const ignoreProps = ["class", "style", "$$slots", "children"];
+
+function updateProperty(node: HTMLElement, props: Record<string, unknown>) {
+  Object.entries(props)
+    .filter(([key]) => !ignoreProps.includes(key))
+    .forEach(([key, value]) => {
+      try {
+        // @ts-expect-error - prop matches the key of the node
+        node[key] = value;
+      } catch (error) {
+        console.warn(\`Error setting property \${key} on node: \${error}\`);
+      }
+    });
+}
+
+export function setProperties(
+  node: HTMLElement,
+  props: Record<string, unknown>
+) {
+  updateProperty(node, props);
+  return {
+    update(props: Record<string, unknown>) {
+      updateProperty(node, props);
+    },
+  };
+}
+
+`;
+//# sourceMappingURL=util-template.js.map

package/lib/vite.config-template.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { javascript } from '@oicl-lit/gen-utils/lib/str-utils.js';
+/**
+ * Generates a Vite config.
+ *
+ * Note, ideally we would be using Vite library mode instead of configuring
+ * the `rollupOptions` manually. However, Vite supports only a single entry
+ * file in that case, and this generator supports multiple modules.
+ *
+ * See https://github.com/vitejs/vite/discussions/1736.
+ *
+ */
+export const viteConfigTemplate = (_pkgJson) => javascript `
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
+`;
+//# sourceMappingURL=vite.config-template.js.map

package/lib/wrapper-module-template-sfc.js

@@ -0,0 +1,239 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import { getImportsStringForReferences, } from '@oicl-lit/analyzer';
+import { javascript, kabobToOnEvent } from '@oicl-lit/gen-utils/lib/str-utils.js';
+const nameToSvelteName = (name) => {
+    return name
+        .replace(/_[a-z]/g, (match) => match.toUpperCase()[1])
+        .replace(/æ/g, 'ae')
+        .replace(/ø/g, 'oe')
+        .replace(/å/g, 'aa')
+        .replace(/Æ/g, 'Ae')
+        .replace(/Ø/g, 'Oe')
+        .replace(/Å/g, 'Aa');
+};
+const isValidSvelteName = (name) => {
+    return !/[_æøåÆØÅ]/.test(name);
+};
+/**
+ * Generates a Svelte wrapper component as a Svelte single file component. This
+ * approach relies on the Svelte compiler to generate a JavaScript property types
+ * object for Svelte runtime type checking from the Typescript property types.
+ */
+export const wrapperModuleTemplateSFC = (packageJson, moduleJsPath, elements) => {
+    moduleJsPath = moduleJsPath.replace(/\\/g, '/');
+    const wcPath = `${packageJson.name}/${moduleJsPath}`;
+    return elements
+        .filter((element) => isValidSvelteName(element.name))
+        .map((element) => {
+        return [
+            nameToSvelteName(element.name),
+            wrapperTemplate(element, wcPath),
+        ];
+    });
+};
+const defaultEventType = `CustomEvent<unknown>`;
+const getEventInfo = (event) => {
+    const { name, type: modelType } = event;
+    const onName = kabobToOnEvent(name);
+    const type = modelType?.text ?? defaultEventType;
+    return { onName, type };
+};
+const renderPropsInterface = (props) => `export interface Props {
+     class?: string;
+     style?: string;
+     ${Array.from(props.values())
+    .map((prop) => {
+    // @ts-expect-error - jsDoc is not typed
+    const comment = prop.node.jsDoc?.map((doc) => doc.comment).join(' ');
+    const description = comment ? ` /** ${comment} */\n` : '';
+    return `${description}${prop.name}?: ${prop.type?.text || 'any'}`;
+})
+    .join(';\n     ')}
+   }`;
+const renderEventsInterface = (events) => `export interface Events {
+    ${Array.from(events.values())
+    .map((event) => {
+    const { type } = getEventInfo(event);
+    return `${kabobToOnEvent(event.name)}?: (event: ${type}) => void`;
+})
+    .join(';\n    ')}
+  }`;
+export const renderEventsMapper = (events) => {
+    return Array.from(events.values())
+        .map((event) => {
+        const { name } = event;
+        return `on${name}={${kabobToOnEvent(name)}}`;
+    })
+        .join('\n   ');
+};
+export const renderPropsMapper = (props) => {
+    return ('class={props.class}\n   style={props.style}\n   ' +
+        Array.from(props.values())
+            .map((prop) => {
+            const { name } = prop;
+            let defaultValue = '';
+            if (prop.default !== undefined) {
+                defaultValue = ` ?? ${prop.default}`;
+            }
+            return `${name}={props.${name}${defaultValue}}`;
+        })
+            .join('\n   '));
+};
+const getTypeReferencesForMap = (map) => Array.from(map.values()).flatMap((e) => e.type?.references ?? []);
+const getElementTypeImports = (declaration) => {
+    const { events, reactiveProperties } = declaration;
+    const refs = [
+        ...getTypeReferencesForMap(events),
+        ...getTypeReferencesForMap(reactiveProperties),
+    ];
+    return getImportsStringForReferences(refs).replace(/(?:^import)/gm, 'import type');
+};
+// TODO(sorvell): add support for getting exports in analyzer.
+const getElementTypeExportsFromImports = (imports) => imports.replace(/(?:^import)/gm, 'export');
+const slotNameToPropName = (name) => {
+    // Normalize and map slot names to safe Svelte identifiers
+    // Rules:
+    // - default/children/"-" map to `children`
+    // - Convert sequences of non-alphanumeric chars into camelCase
+    // - Remove remaining non-alphanumerics
+    const trimmed = name.trim();
+    if (/^-+$/.test(trimmed))
+        return 'children';
+    if (/^(default|children)$/i.test(trimmed))
+        return 'children';
+    // If the name contains a placeholder like <id>, we clean it up but keep the rest
+    // to form a property name for the parameterized snippet.
+    // e.g. tab-<id>-icon -> tabIcon
+    const cleanName = trimmed.replace(/<[^>]+>/g, '');
+    // Build camelCase tokenizing on any non-alphanumeric sequence
+    return cleanName
+        .split(/[^a-zA-Z0-9]+/)
+        .filter((t) => t.length > 0)
+        .map((t, i) => (i === 0 ? t : t[0].toUpperCase() + t.slice(1)))
+        .join('');
+};
+const createNamingPlan = (slots, props) => {
+    const propNames = new Set(Array.from(props.values()).map((prop) => prop.name));
+    const snippetNamesBySlotName = new Map();
+    const collidingPropNames = new Set();
+    for (const slot of slots.values()) {
+        const isDefault = slot.name === 'default' || slot.name === '' || slot.name === '-';
+        const snippetName = isDefault ? 'children' : slotNameToPropName(slot.name);
+        snippetNamesBySlotName.set(slot.name, snippetName);
+        if (propNames.has(snippetName)) {
+            collidingPropNames.add(snippetName);
+        }
+    }
+    for (const [slotName, snippetName] of snippetNamesBySlotName) {
+        if (collidingPropNames.has(snippetName)) {
+            snippetNamesBySlotName.set(slotName, `${snippetName}Snippet`);
+        }
+    }
+    return {
+        snippetNamesBySlotName,
+    };
+};
+const renderSlotsInterface = (slots, namingPlan) => {
+    const items = Array.from(slots.values()).map((slot) => {
+        const propName = namingPlan.snippetNamesBySlotName.get(slot.name) ?? 'children';
+        const isDynamic = slot.name.includes('<');
+        return `${propName}?: Snippet${isDynamic ? '<[any]>' : ''}`;
+    });
+    // Always support a default snippet even if analyzer didn't declare slots
+    if (items.length === 0) {
+        items.push('children?: Snippet');
+    }
+    return `export interface Slots {\n  ${items.join(';\n  ')}\n}`;
+};
+const renderSlotsDestructureList = (slots, namingPlan) => {
+    const names = Array.from(slots.values()).map((slot) => namingPlan.snippetNamesBySlotName.get(slot.name) ?? 'children');
+    if (names.length === 0) {
+        names.push('children');
+    }
+    return names.join(', ');
+};
+const renderSnippets = (slots, props, namingPlan) => {
+    const parts = Array.from(slots.values()).map((slot) => {
+        const isDefault = slot.name === 'default' || slot.name === '' || slot.name === '-';
+        if (isDefault) {
+            return javascript `
+      {#if children}
+        {@render children()}
+      {/if}`;
+        }
+        const propName = namingPlan.snippetNamesBySlotName.get(slot.name) ?? 'children';
+        const placeholderMatch = slot.name.match(/<([^>]+)>/);
+        if (placeholderMatch) {
+            const placeholder = placeholderMatch[1];
+            // Try to find a property that is likely the collection for this slot.
+            // Heuristic: property name starts with the prefix of the slot name.
+            const prefix = slot.name.split('<')[0].replace(/-$/, '');
+            const collectionProp = Array.from(props.values()).find((p) => p.name === prefix ||
+                p.name === prefix + 's' ||
+                p.name === prefix + 'es');
+            if (collectionProp) {
+                const collectionName = collectionProp.name;
+                return javascript `
+      {#if ${collectionName} && ${propName}}
+        {#each ${collectionName} as item}
+          <div slot="${slot.name.replace(`<${placeholder}>`, `{item.${placeholder}}`)}">
+            {@render ${propName}(item)}
+          </div>
+        {/each}
+      {/if}`;
+            }
+        }
+        // Use div with slot attribute and display: contents so content projects into named slot of the web component
+        return javascript `
+      {#if ${propName}}
+        <div slot="${slot.name}">
+          {@render ${propName}()}
+        </div>
+      {/if}`;
+    });
+    if (parts.length === 0) {
+        parts.push(javascript `
+    {#if children}
+      {@render children()}
+    {/if}`);
+    }
+    return parts.join('\n');
+};
+const renderEventsProps = (events) => {
+    const eventsProps = Array.from(events.keys())
+        .map((event) => kabobToOnEvent(event))
+        .join(', ');
+    return eventsProps ? `${eventsProps},` : '';
+};
+const wrapperTemplate = (declaration, wcPath) => {
+    const { tagname, events, reactiveProperties, slots } = declaration;
+    const namingPlan = createNamingPlan(slots, reactiveProperties);
+    const typeImports = getElementTypeImports(declaration);
+    const typeExports = getElementTypeExportsFromImports(typeImports);
+    return javascript `
+  <script lang="ts">
+    ${typeExports ?? ''}
+      import '${wcPath}';
+      import { setProperties } from "$lib/util.js";
+      ${typeImports}
+      import type { Snippet } from 'svelte';
+
+      ${renderPropsInterface(reactiveProperties)}
+      ${renderEventsInterface(events)}
+      ${renderSlotsInterface(slots, namingPlan)}
+      const {${renderEventsProps(events)} class: className, style, ${renderSlotsDestructureList(slots, namingPlan)}, ...props} = $props<Props & Events & Slots>();
+
+    </script>
+    <${tagname}
+    use:setProperties={props}
+    class={className}
+    style={style}
+    ${renderEventsMapper(events)} >
+      ${renderSnippets(slots, reactiveProperties, namingPlan)}
+    </${tagname}>`;
+};
+//# sourceMappingURL=wrapper-module-template-sfc.js.map

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@oicl-lit/gen-wrapper-svelte",
+  "description": "Code generator for Svelte wrapper for Lit components",
+  "version": "0.0.2",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Google LLC",
+  "license": "BSD-3-Clause",
+  "bugs": "https://github.com/lit/lit/issues",
+  "type": "module",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lit/lit.git",
+    "directory": "packages/labs/gen-wrapper-svelte"
+  },
+  "scripts": {
+    "build": "wireit",
+    "test": "wireit",
+    "test:gen": "wireit",
+    "test:update-goldens": "UPDATE_TEST_GOLDENS=true npm run test:gen"
+  },
+  "wireit": {
+    "build": {
+      "command": "tsc --build --pretty",
+      "dependencies": [
+        "../analyzer:build",
+        "../../tests:build",
+        "../gen-utils:build"
+      ],
+      "files": [
+        "src/**/*",
+        "tsconfig.json"
+      ],
+      "output": [
+        "test-gen",
+        "lib",
+        "index.{js,js.map,d.ts,d.ts.map}",
+        "tsconfig.tsbuildinfo"
+      ],
+      "clean": "if-file-deleted"
+    },
+    "test:gen": {
+      "files": [
+        "goldens/**/*"
+      ],
+      "dependencies": [
+        "build",
+        "../test-projects/test-element-a:pack"
+      ],
+      "#comment": "The quotes around the file regex must be double quotes on windows!",
+      "command": "uvu test-gen \"_test\\.js$\"",
+      "output": [
+        "gen-output",
+        "!gen-output/node_modules"
+      ]
+    },
+    "test": {
+      "dependencies": [
+        "test:gen"
+      ]
+    }
+  },
+  "dependencies": {
+    "@oicl-lit/analyzer": "^0.14.0",
+    "@oicl-lit/gen-utils": "^0.3.0"
+  },
+  "devDependencies": {
+    "@lit-internal/tests": "^0.0.1",
+    "prettier-plugin-svelte": "^3.2.6"
+  },
+  "engines": {
+    "node": ">=14.8.0"
+  },
+  "files": [
+    "/index.js",
+    "/lib/*.js"
+  ],
+  "homepage": "https://github.com/lit/lit",
+  "keywords": [
+    "lit",
+    "lit-html",
+    "lit-element",
+    "LitElement",
+    "generator",
+    "cli",
+    "svelte"
+  ]
+}