@esportsplus/template 0.32.4 → 0.33.0

package/build/{transformer → compiler}/codegen.js

@@ -1,9 +1,10 @@
 import { ts } from '@esportsplus/typescript';
 import { ast, code as c, uid } from '@esportsplus/typescript/transformer';
 import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer.js';
-import { COMPILER_ENTRYPOINT, COMPILER_NAMESPACE, COMPILER_TYPES, PACKAGE } from '../constants.js';
+import { COMPILER_ENTRYPOINT, COMPILER_NAMESPACE, COMPILER_TYPES, PACKAGE, PACKAGE_COMPILER } from '../constants.js';
 import parser from './parser.js';
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
+const REGEX_PACKAGE_IMPORT = new RegExp(`import\\s*\\{[^}]*\\}\\s*from\\s*['"]${PACKAGE.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}['"];?\\n?`, 'g');
 let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
 function collectNestedTemplateReplacements(ctx, node, exprStart, replacements) {
     if (isNestedHtmlTemplate(node)) {
@@ -80,7 +81,7 @@ function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArro
             }
         }
         let name = uid('element'), suffix = path.slice(startIdx).join('.');
-        declarations.push(`${name} = ${ancestorVar}.${suffix}`);
+        declarations.push(`${name} = ${ancestorVar}.${suffix} as ${COMPILER_NAMESPACE}.Element`);
         nodes.set(key, name);
     }
     code.push(isArrowBody ? '{' : `(() => {`, `let ${declarations.join(',\n')};`);
@@ -155,7 +156,10 @@ function rewriteExpression(ctx, expr) {
     return c.replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
 const addImport = (code) => {
-    return `import * as ${COMPILER_NAMESPACE} from '${PACKAGE}';\n` + code;
+    return `import * as ${COMPILER_NAMESPACE} from '${PACKAGE_COMPILER}';\n` + code;
+};
+const removePackageImport = (code) => {
+    return code.replace(REGEX_PACKAGE_IMPORT, '');
 };
 const generateCode = (templates, originalCode, sourceFile, checker) => {
     if (templates.length === 0) {
@@ -208,7 +212,7 @@ const generateCode = (templates, originalCode, sourceFile, checker) => {
         for (let [id, html] of ctx.hoistedFactories) {
             factories.push(`const ${id} = ${COMPILER_NAMESPACE}.template(\`${html}\`);`);
         }
-        code = addImport(factories.join('\n') + code);
+        code = addImport(factories.join('\n') + removePackageImport(code));
     }
     return { changed, code };
 };

package/build/{transformer → compiler}/index.d.ts

@@ -6,3 +6,9 @@ type TransformResult = {
 };
 declare const transform: (sourceFile: ts.SourceFile, program: ts.Program) => TransformResult;
 export { transform };
+export * from '../attributes.js';
+export * from '../event/index.js';
+export { ArraySlot } from '../slot/array.js';
+export { EffectSlot } from '../slot/effect.js';
+export type * from '../types.js';
+export * from '../utilities.js';

package/build/{transformer → compiler}/index.js

@@ -44,3 +44,8 @@ const transform = (sourceFile, program) => {
     return { changed, code: result, sourceFile };
 };
 export { transform };
+export * from '../attributes.js';
+export * from '../event/index.js';
+export { ArraySlot } from '../slot/array.js';
+export { EffectSlot } from '../slot/effect.js';
+export * from '../utilities.js';

package/build/compiler/plugins/index.d.ts

@@ -0,0 +1,2 @@
+export { default as tsc } from './tsc.js';
+export { default as vite } from './vite.js';

package/build/compiler/plugins/index.js

@@ -0,0 +1,2 @@
+export { default as tsc } from './tsc.js';
+export { default as vite } from './vite.js';

package/build/constants.d.ts

@@ -17,9 +17,10 @@ declare const enum COMPILER_TYPES {
 declare const DIRECT_ATTACH_EVENTS: Set<string>;
 declare const LIFECYCLE_EVENTS: Set<string>;
 declare const PACKAGE = "@esportsplus/template";
+declare const PACKAGE_COMPILER = "@esportsplus/template/compiler";
 declare const SLOT_HTML = "<!--$-->";
 declare const STATE_HYDRATING = 0;
 declare const STATE_NONE = 1;
 declare const STATE_WAITING = 2;
 declare const STORE: unique symbol;
-export { ARRAY_SLOT, CLEANUP, COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE, };
+export { ARRAY_SLOT, CLEANUP, COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE, PACKAGE_COMPILER, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE, };

package/build/constants.js

@@ -30,9 +30,10 @@ const LIFECYCLE_EVENTS = new Set([
     'onconnect', 'ondisconnect', 'onrender', 'onresize', 'ontick'
 ]);
 const PACKAGE = '@esportsplus/template';
+const PACKAGE_COMPILER = '@esportsplus/template/compiler';
 const SLOT_HTML = '<!--$-->';
 const STATE_HYDRATING = 0;
 const STATE_NONE = 1;
 const STATE_WAITING = 2;
 const STORE = Symbol('template.store');
-export { ARRAY_SLOT, CLEANUP, COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE, };
+export { ARRAY_SLOT, CLEANUP, COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE, PACKAGE_COMPILER, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE, };

package/build/event/onconnect.d.ts

@@ -1,2 +1,3 @@
+import { Element } from '../types.js';
 declare const _default: (element: Element, listener: Function) => void;
 export default _default;

package/build/event/ontick.d.ts

@@ -1,3 +1,4 @@
+import { Element } from '../types.js';
 declare const add: (task: VoidFunction) => void;
 declare const remove: (task: VoidFunction) => void;
 declare const _default: (element: Element, listener: Function) => void;

package/build/index.d.ts

@@ -2,10 +2,4 @@ import './runtime.js';
 export { default as html } from './html.js';
 export { default as render } from './render.js';
 export { default as svg } from './svg.js';
-export * from './attributes.js';
-export * from './event/index.js';
-export { default as slot } from './slot/index.js';
-export { ArraySlot } from './slot/array.js';
-export { EffectSlot } from './slot/effect.js';
 export type { Attributes, Element, Renderable } from './types.js';
-export * from './utilities.js';

package/build/index.js

@@ -2,9 +2,3 @@ import './runtime.js';
 export { default as html } from './html.js';
 export { default as render } from './render.js';
 export { default as svg } from './svg.js';
-export * from './attributes.js';
-export * from './event/index.js';
-export { default as slot } from './slot/index.js';
-export { ArraySlot } from './slot/array.js';
-export { EffectSlot } from './slot/effect.js';
-export * from './utilities.js';

package/package.json

@@ -17,18 +17,14 @@
       "import": "./build/index.js",
       "types": "./build/index.d.ts"
     },
-    "./constants": {
-      "import": "./build/constants.js",
-      "types": "./build/constants.d.ts"
+    "./compiler": {
+      "import": "./build/compiler/index.js",
+      "types": "./build/compiler/index.d.ts"
     },
-    "./plugins/tsc": {
-      "types": "./build/transformer/plugins/tsc.d.ts",
-      "import": "./build/transformer/plugins/tsc.js",
-      "require": "./build/transformer/plugins/tsc.js"
-    },
-    "./plugins/vite": {
-      "types": "./build/transformer/plugins/vite.d.ts",
-      "import": "./build/transformer/plugins/vite.js"
+    "./compiler/plugins": {
+      "types": "./build/compiler/plugins/index.d.ts",
+      "import": "./build/compiler/plugins/index.js",
+      "require": "./build/compiler/plugins/index.js"
     }
   },
   "main": "./build/index.js",
@@ -40,7 +36,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.32.4",
+  "version": "0.33.0",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/{transformer → compiler}/codegen.ts

@@ -4,7 +4,7 @@ import type { ReactiveCallInfo, TemplateInfo } from './ts-parser';
 import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer';
 import {
     COMPILER_ENTRYPOINT, COMPILER_NAMESPACE, COMPILER_TYPES,
-    PACKAGE
+    PACKAGE, PACKAGE_COMPILER
 } from '~/constants';
 import parser from './parser';
 
@@ -44,6 +44,11 @@ type ParseResult = {
 
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 
+const REGEX_PACKAGE_IMPORT = new RegExp(
+    `import\\s*\\{[^}]*\\}\\s*from\\s*['"]${PACKAGE.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}['"];?\\n?`,
+    'g'
+);
+
 
 let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
 
@@ -174,7 +179,7 @@ function generateTemplateCode(
         let name = uid('element'),
             suffix = path.slice(startIdx).join('.');
 
-        declarations.push(`${name} = ${ancestorVar}.${suffix}`);
+        declarations.push(`${name} = ${ancestorVar}.${suffix} as ${COMPILER_NAMESPACE}.Element`);
         nodes.set(key, name);
     }
 
@@ -295,7 +300,11 @@ function rewriteExpression(ctx: CodegenContext, expr: ts.Expression): string {
 
 
 const addImport = (code: string): string => {
-    return `import * as ${COMPILER_NAMESPACE} from '${PACKAGE}';\n` + code;
+    return `import * as ${COMPILER_NAMESPACE} from '${PACKAGE_COMPILER}';\n` + code;
+};
+
+const removePackageImport = (code: string): string => {
+    return code.replace(REGEX_PACKAGE_IMPORT, '');
 };
 
 const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker): CodegenResult => {
@@ -378,7 +387,7 @@ const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFil
             factories.push(`const ${id} = ${COMPILER_NAMESPACE}.template(\`${html}\`);`);
         }
 
-        code = addImport(factories.join('\n') + code);
+        code = addImport(factories.join('\n') + removePackageImport(code));
     }
 
     return { changed, code };

package/src/{transformer → compiler}/index.ts

@@ -76,3 +76,9 @@ const transform = (sourceFile: ts.SourceFile, program: ts.Program): TransformRes
 
 
 export { transform };
+export * from '~/attributes';
+export * from '~/event';
+export { ArraySlot } from '~/slot/array';
+export { EffectSlot } from '~/slot/effect';
+export type * from '~/types';
+export * from '~/utilities';

package/src/compiler/plugins/index.ts

@@ -0,0 +1,2 @@
+export { default as tsc } from './tsc';
+export { default as vite } from './vite';

package/src/constants.ts

@@ -40,6 +40,8 @@ const LIFECYCLE_EVENTS = new Set<string>([
 
 const PACKAGE = '@esportsplus/template';
 
+const PACKAGE_COMPILER = '@esportsplus/template/compiler';
+
 
 const SLOT_HTML = '<!--$-->';
 
@@ -58,6 +60,6 @@ export {
     COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES,
     DIRECT_ATTACH_EVENTS,
     LIFECYCLE_EVENTS,
-    PACKAGE,
+    PACKAGE, PACKAGE_COMPILER,
     SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE,
 };

package/src/event/onconnect.ts

@@ -1,5 +1,6 @@
 import { root } from '@esportsplus/reactivity';
 import { add, remove } from './ontick';
+import { Element } from '~/types';
 
 
 export default (element: Element, listener: Function) => {

package/src/event/ontick.ts

@@ -1,3 +1,4 @@
+import { Element } from '~/types';
 import { raf } from '~/utilities';
 
 

package/src/index.ts

@@ -2,12 +2,4 @@ import './runtime';
 export { default as html } from './html';
 export { default as render } from './render';
 export { default as svg } from './svg';
-
-// Must be exported for compilation even if not used directly
-export * from './attributes';
-export * from './event';
-export { default as slot } from './slot';
-export { ArraySlot } from './slot/array';
-export { EffectSlot } from './slot/effect';
 export type { Attributes, Element, Renderable } from './types';
-export * from './utilities';

package/test/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import { resolve } from 'path';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import templatePlugin from '../src/transformer/plugins/vite';
+import templatePlugin from '../src/compiler/vite';
 
 
 export default defineConfig({