@uibit/codegen 0.1.0

package/dist/templates/svelte.js

@@ -0,0 +1,87 @@
+import { SourceBuilder, mergePropertiesAndAttributes, generateTypeImports } from '../core/utils.js';
+export const sveltePlugin = {
+    name: 'svelte',
+    generate(component) {
+        return {
+            'index.svelte': buildSvelte(component)
+        };
+    }
+};
+function renderSvelteScriptImports(name, referencedTypes, importPath) {
+    return [
+        `import '${importPath}';`,
+        `import type { ${name} as HTMLElementClass } from '${importPath}';`,
+        generateTypeImports(referencedTypes, importPath)
+    ].filter(Boolean).join('\n');
+}
+function renderSveltePropsDeclaration(propMap, namedSlots) {
+    const svelteProps = Array.from(propMap.keys()).map(name => `${name} = undefined`).join(',\n    ');
+    const slotProps = namedSlots.map(s => `${s.name} = undefined`).join(',\n    ');
+    const allProps = [svelteProps, slotProps, 'children'].filter(Boolean).join(',\n    ');
+    const svelteTypes = Array.from(propMap.entries()).map(([propName, propType]) => {
+        return `  ${propName}?: ${propType};`;
+    }).join('\n');
+    const slotTypes = namedSlots.map(s => `  ${s.name}?: import('svelte').Snippet;`).join('\n');
+    return `let {
+  ${allProps}
+} = $props<{
+  children?: any;
+${svelteTypes}
+${slotTypes}
+}>();`;
+}
+function renderSvelteEffects(propMap) {
+    const svelteEffects = Array.from(propMap.keys()).map(propName => {
+        return `  if (elementRef && ${propName} !== undefined) {
+    elementRef.${propName} = ${propName};
+  }`;
+    }).join('\n');
+    return `let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+${svelteEffects}
+});`;
+}
+function renderSvelteScriptBlock(component) {
+    const { name, properties, attributes, slots, referencedTypes, importPath = '../../index.js' } = component;
+    const propMap = mergePropertiesAndAttributes(properties, attributes);
+    const namedSlots = slots.filter(s => s.name && s.name !== '');
+    const scriptContent = new SourceBuilder()
+        .append(renderSvelteScriptImports(name, referencedTypes, importPath))
+        .append(renderSveltePropsDeclaration(propMap, namedSlots))
+        .append(renderSvelteEffects(propMap))
+        .toString();
+    const indentedContent = scriptContent
+        .split('\n')
+        .map(line => '  ' + line)
+        .join('\n');
+    return `<script lang="ts">
+${indentedContent}
+</script>`;
+}
+function renderSvelteTemplate(component) {
+    const { tagName, slots } = component;
+    const namedSlots = slots.filter(s => s.name && s.name !== '');
+    const projectedSlots = namedSlots.map(s => {
+        return `  {#if ${s.name}}
+    <div slot="${s.name}">
+      {@render ${s.name}()}
+    </div>
+  {/if}`;
+    }).join('\n');
+    return `<${tagName} bind:this={elementRef} {...$$restProps}>
+${projectedSlots}
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</${tagName}>`;
+}
+function buildSvelte(component) {
+    return new SourceBuilder()
+        .append(renderSvelteScriptBlock(component))
+        .append(renderSvelteTemplate(component))
+        .toString();
+}
+//# sourceMappingURL=svelte.js.map

package/dist/templates/svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.js","sourceRoot":"","sources":["../../src/templates/svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,4BAA4B,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEpG,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,QAAQ;IACd,QAAQ,CAAC,SAA4B;QACnC,OAAO;YACL,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC;SACvC,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,SAAS,yBAAyB,CAAC,IAAY,EAAE,eAAyB,EAAE,UAAkB;IAC5F,OAAO;QACL,WAAW,UAAU,IAAI;QACzB,iBAAiB,IAAI,gCAAgC,UAAU,IAAI;QACnE,mBAAmB,CAAC,eAAe,EAAE,UAAU,CAAC;KACjD,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/B,CAAC;AAED,SAAS,4BAA4B,CAAC,OAA4B,EAAE,UAAiB;IACnF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAClG,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/E,MAAM,QAAQ,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAEtF,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,EAAE;QAC7E,OAAO,KAAK,QAAQ,MAAM,QAAQ,GAAG,CAAC;IACxC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,8BAA8B,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE5F,OAAO;IACL,QAAQ;;;EAGV,WAAW;EACX,SAAS;MACL,CAAC;AACP,CAAC;AAED,SAAS,mBAAmB,CAAC,OAA4B;IACvD,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;QAC9D,OAAO,uBAAuB,QAAQ;iBACzB,QAAQ,MAAM,QAAQ;IACnC,CAAC;IACH,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO;;;EAGP,aAAa;IACX,CAAC;AACL,CAAC;AAED,SAAS,uBAAuB,CAAC,SAA4B;IAC3D,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,GAAG,gBAAgB,EAAE,GAAG,SAAS,CAAC;IAC1G,MAAM,OAAO,GAAG,4BAA4B,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;IAE9D,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE;SACtC,MAAM,CAAC,yBAAyB,CAAC,IAAI,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC;SACpE,MAAM,CAAC,4BAA4B,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;SACzD,MAAM,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;SACpC,QAAQ,EAAE,CAAC;IAEd,MAAM,eAAe,GAAG,aAAa;SAClC,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC;SACxB,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO;EACP,eAAe;UACP,CAAC;AACX,CAAC;AAED,SAAS,oBAAoB,CAAC,SAA4B;IACxD,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;IACrC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC;IAE9D,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACxC,OAAO,UAAU,CAAC,CAAC,IAAI;iBACV,CAAC,CAAC,IAAI;iBACN,CAAC,CAAC,IAAI;;QAEf,CAAC;IACP,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO,IAAI,OAAO;EAClB,cAAc;;;;;;IAMZ,OAAO,GAAG,CAAC;AACf,CAAC;AAED,SAAS,WAAW,CAAC,SAA4B;IAC/C,OAAO,IAAI,aAAa,EAAE;SACvB,MAAM,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;SAC1C,MAAM,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;SACvC,QAAQ,EAAE,CAAC;AAChB,CAAC"}

package/dist/templates/vue.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentMetadata } from '../core/types.js';
+export declare const vuePlugin: {
+    name: string;
+    generate(component: ComponentMetadata): {
+        'index.ts': string;
+    };
+};
+//# sourceMappingURL=vue.d.ts.map

package/dist/templates/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/templates/vue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,eAAO,MAAM,SAAS;IACpB,IAAI;IACJ,QAAQ,YAAY,iBAAiB;QAEjC,UAAU;;CAGf,CAAC"}

package/dist/templates/vue.js

@@ -0,0 +1,57 @@
+import { SourceBuilder, mergePropertiesAndAttributes, generateTypeImports } from '../core/utils.js';
+export const vuePlugin = {
+    name: 'vue',
+    generate(component) {
+        return {
+            'index.ts': buildTS(component)
+        };
+    }
+};
+function renderVueImports(name, referencedTypes, importPath) {
+    return [
+        `import { defineComponent, h } from 'vue';`,
+        `import type { ${name} as HTMLElementClass } from '${importPath}';`,
+        `import '${importPath}';`,
+        generateTypeImports(referencedTypes, importPath)
+    ].filter(Boolean).join('\n');
+}
+function renderVueComponent(component) {
+    const { name, tagName, events, properties, attributes } = component;
+    const propMap = mergePropertiesAndAttributes(properties, attributes);
+    const propsList = Array.from(propMap.keys())
+        .map(propName => `    ${propName}: { type: [String, Number, Boolean, Array, Object] as any }`)
+        .join(',\n');
+    const emitsList = events.map(e => `'${e.name}'`).join(', ');
+    const eventBindings = events.map(e => {
+        const vueEventName = `on${e.name.charAt(0).toUpperCase() + e.name.slice(1)}`;
+        return `      eventListeners['${vueEventName}'] = (event: Event) => {
+        emit('${e.name}', event);
+      };`;
+    }).join('\n');
+    return `export const ${name} = defineComponent({
+  name: '${name}',
+  props: {
+${propsList}
+  },
+  emits: [${emitsList}],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+${eventBindings}
+
+      return h('${tagName}', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});`;
+}
+function buildTS(component) {
+    const importPath = component.importPath || '../../index.js';
+    return new SourceBuilder()
+        .append(renderVueImports(component.name, component.referencedTypes, importPath))
+        .append(renderVueComponent(component))
+        .toString();
+}
+//# sourceMappingURL=vue.js.map

package/dist/templates/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","sourceRoot":"","sources":["../../src/templates/vue.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,4BAA4B,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEpG,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,KAAK;IACX,QAAQ,CAAC,SAA4B;QACnC,OAAO;YACL,UAAU,EAAE,OAAO,CAAC,SAAS,CAAC;SAC/B,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,SAAS,gBAAgB,CAAC,IAAY,EAAE,eAAyB,EAAE,UAAkB;IACnF,OAAO;QACL,2CAA2C;QAC3C,iBAAiB,IAAI,gCAAgC,UAAU,IAAI;QACnE,WAAW,UAAU,IAAI;QACzB,mBAAmB,CAAC,eAAe,EAAE,UAAU,CAAC;KACjD,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/B,CAAC;AAED,SAAS,kBAAkB,CAAC,SAA4B;IACtD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,SAAS,CAAC;IACpE,MAAM,OAAO,GAAG,4BAA4B,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAErE,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACzC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,QAAQ,6DAA6D,CAAC;SAC7F,IAAI,CAAC,KAAK,CAAC,CAAC;IAEf,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE5D,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACnC,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7E,OAAO,yBAAyB,YAAY;gBAChC,CAAC,CAAC,IAAI;SACb,CAAC;IACR,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO,gBAAgB,IAAI;WAClB,IAAI;;EAEb,SAAS;;YAEC,SAAS;;;;EAInB,aAAa;;kBAEG,OAAO;;;;;;IAMrB,CAAC;AACL,CAAC;AAED,SAAS,OAAO,CAAC,SAA4B;IAC3C,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,IAAI,gBAAgB,CAAC;IAC5D,OAAO,IAAI,aAAa,EAAE;SACvB,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;SAC/E,MAAM,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC;SACrC,QAAQ,EAAE,CAAC;AAChB,CAAC"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@uibit/codegen",
+  "version": "0.1.0",
+  "description": "Generic multi-framework component wrapper generator based on Custom Elements Manifest",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "uibit-codegen": "./bin/uibit-codegen"
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "typescript": "7.0.2"
+  },
+  "dependencies": {
+    "oxc-parser": "^0.139.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/platform/codegen"
+  },
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  }
+}