@esportsplus/template 0.31.2 → 0.31.3

package/build/transformer/codegen.js

@@ -3,7 +3,7 @@ import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } f
 import { ts } from '@esportsplus/typescript';
 import parser from './parser.js';
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
-let currentChecker, hoistedFactories = new Map(), htmlToTemplateId = new Map(), nameArraySlot = '', nameAttr = '', nameEffectSlot = '', nameEvent = '', nameSlot = '', nameTemplate = '', needsArraySlot = false, needsAttr = false, needsEffectSlot = false, needsEvent = false, needsSlot = false;
+let currentChecker, hoistedFactories = new Map(), htmlToTemplateId = new Map(), ns = '';
 function collectNestedTemplateReplacements(node, exprStart, sourceFile, replacements) {
     if (isNestedHtmlTemplate(node)) {
         replacements.push({
@@ -17,24 +17,7 @@ function collectNestedTemplateReplacements(node, exprStart, sourceFile, replacem
     }
 }
 function generateImports() {
-    let specifiers = [];
-    if (needsArraySlot) {
-        specifiers.push(`ArraySlot as ${nameArraySlot}`);
-    }
-    if (needsEffectSlot) {
-        specifiers.push(`EffectSlot as ${nameEffectSlot}`);
-    }
-    if (needsAttr) {
-        specifiers.push(`attributes as ${nameAttr}`);
-    }
-    if (needsEvent) {
-        specifiers.push(`event as ${nameEvent}`);
-    }
-    if (needsSlot) {
-        specifiers.push(`slot as ${nameSlot}`);
-    }
-    specifiers.push(`template as ${nameTemplate}`);
-    return `import { ${specifiers.join(', ')} } from '@esportsplus/template';`;
+    return `import * as ${ns} from '@esportsplus/template';`;
 }
 function generateNestedTemplateCode(node, sourceFile) {
     let expressions = [], exprTexts = [], literals = [], template = node.template;
@@ -54,8 +37,7 @@ function generateNestedTemplateCode(node, sourceFile) {
 }
 function generateNodeBinding(anchor, exprText, exprNode, sourceFile) {
     if (!exprNode) {
-        needsSlot = true;
-        return `${nameSlot}(${anchor}, ${exprText});`;
+        return `${ns}.slot(${anchor}, ${exprText});`;
     }
     if (isNestedHtmlTemplate(exprNode)) {
         return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(exprNode, sourceFile)}, ${anchor});`;
@@ -63,18 +45,15 @@ function generateNodeBinding(anchor, exprText, exprNode, sourceFile) {
     let slotType = analyzeExpression(exprNode, currentChecker);
     switch (slotType) {
         case 'effect':
-            needsEffectSlot = true;
-            return `new ${nameEffectSlot}(${anchor}, ${exprText});`;
+            return `new ${ns}.EffectSlot(${anchor}, ${exprText});`;
         case 'array-slot':
-            needsArraySlot = true;
-            return `new ${nameArraySlot}(${anchor}, ${exprText});`;
+            return `new ${ns}.ArraySlot(${anchor}, ${exprText});`;
         case 'static':
             return `${anchor}.textContent = ${exprText};`;
         case 'document-fragment':
             return `${anchor}.parentNode.insertBefore(${exprText}, ${anchor});`;
         default:
-            needsSlot = true;
-            return `${nameSlot}(${anchor}, ${exprText});`;
+            return `${ns}.slot(${anchor}, ${exprText});`;
     }
 }
 function generateTemplateCode({ html, slots }, exprTexts, exprNodes, sourceFile, isArrowBody) {
@@ -117,14 +96,12 @@ function generateTemplateCode({ html, slots }, exprTexts, exprNodes, sourceFile,
                 if (name === 'spread') {
                     let bindings = generateSpreadBindings(exprNodes[index], exprTexts[index] || 'undefined', elementVar, sourceFile, currentChecker);
                     for (let k = 0, o = bindings.length; k < o; k++) {
-                        trackBindingUsage(bindings[k]);
                         code.push(bindings[k]);
                     }
                     index++;
                 }
                 else {
                     let binding = generateAttributeBinding(elementVar, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || '');
-                    trackBindingUsage(binding);
                     code.push(binding);
                 }
             }
@@ -220,14 +197,6 @@ function rewriteExpression(expr, sourceFile) {
     collectNestedTemplateReplacements(expr, exprStart, sourceFile, replacements);
     return applyReplacementsReverse(expr.getText(sourceFile), replacements);
 }
-function trackBindingUsage(binding) {
-    if (binding.startsWith(nameEvent + '.')) {
-        needsEvent = true;
-    }
-    else if (binding.startsWith(nameAttr + '.')) {
-        needsAttr = true;
-    }
-}
 const addArraySlotImport = (code) => {
     return addImport(code, '@esportsplus/template', ['ArraySlot']);
 };
@@ -237,17 +206,7 @@ const generateCode = (templates, originalCode, sourceFile) => {
     }
     hoistedFactories.clear();
     htmlToTemplateId.clear();
-    nameArraySlot = uid('ArraySlot');
-    nameAttr = uid('attr');
-    nameEffectSlot = uid('EffectSlot');
-    nameEvent = uid('event');
-    nameSlot = uid('slot');
-    nameTemplate = uid('template');
-    needsArraySlot = false;
-    needsAttr = false;
-    needsEffectSlot = false;
-    needsEvent = false;
-    needsSlot = false;
+    ns = uid('t');
     let rootTemplates = templates.filter(t => !isNestedTemplate(t, templates));
     if (rootTemplates.length === 0) {
         return { changed: false, code: originalCode };
@@ -280,7 +239,7 @@ const generateCode = (templates, originalCode, sourceFile) => {
     if (changed && hoistedFactories.size > 0) {
         let factories = [];
         for (let [id, html] of hoistedFactories) {
-            factories.push(`const ${id} = ${nameTemplate}(\`${html}\`);`);
+            factories.push(`const ${id} = ${ns}.template(\`${html}\`);`);
         }
         code = generateImports() + '\n\n' + factories.join('\n') + '\n\n' + code;
     }
@@ -294,7 +253,7 @@ const generateReactiveInlining = (calls, code, sourceFile) => {
     for (let i = calls.length - 1; i >= 0; i--) {
         let call = calls[i];
         result = result.slice(0, call.start);
-        result += `new ${nameArraySlot}(
+        result += `new ${ns}.ArraySlot(
                 ${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)},
                 ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)}
             )`;
@@ -303,9 +262,9 @@ const generateReactiveInlining = (calls, code, sourceFile) => {
     return result;
 };
 const getNames = () => ({
-    attr: nameAttr,
-    event: nameEvent,
-    slot: nameSlot
+    attr: `${ns}.attributes`,
+    event: `${ns}.event`,
+    slot: `${ns}.slot`
 });
 const needsArraySlotImport = (sourceFile) => {
     return hasArraySlotUsage(sourceFile) && !hasArraySlotImport(sourceFile);

package/package.json

@@ -40,7 +40,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.31.2",
+  "version": "0.31.3",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/transformer/codegen.ts

@@ -37,17 +37,7 @@ const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 let currentChecker: ts.TypeChecker | undefined,
     hoistedFactories = new Map<string, string>(),
     htmlToTemplateId = new Map<string, string>(),
-    nameArraySlot = '',
-    nameAttr = '',
-    nameEffectSlot = '',
-    nameEvent = '',
-    nameSlot = '',
-    nameTemplate = '',
-    needsArraySlot = false,
-    needsAttr = false,
-    needsEffectSlot = false,
-    needsEvent = false,
-    needsSlot = false;
+    ns = '';
 
 
 function collectNestedTemplateReplacements(
@@ -69,31 +59,7 @@ function collectNestedTemplateReplacements(
 }
 
 function generateImports(): string {
-    let specifiers: string[] = [];
-
-    if (needsArraySlot) {
-        specifiers.push(`ArraySlot as ${nameArraySlot}`);
-    }
-
-    if (needsEffectSlot) {
-        specifiers.push(`EffectSlot as ${nameEffectSlot}`);
-    }
-
-    if (needsAttr) {
-        specifiers.push(`attributes as ${nameAttr}`);
-    }
-
-    if (needsEvent) {
-        specifiers.push(`event as ${nameEvent}`);
-    }
-
-    if (needsSlot) {
-        specifiers.push(`slot as ${nameSlot}`);
-    }
-
-    specifiers.push(`template as ${nameTemplate}`);
-
-    return `import { ${specifiers.join(', ')} } from '@esportsplus/template';`;
+    return `import * as ${ns} from '@esportsplus/template';`;
 }
 
 function generateNestedTemplateCode(node: ts.TaggedTemplateExpression, sourceFile: ts.SourceFile): string {
@@ -128,8 +94,7 @@ function generateNestedTemplateCode(node: ts.TaggedTemplateExpression, sourceFil
 
 function generateNodeBinding(anchor: string, exprText: string, exprNode: ts.Expression | undefined, sourceFile: ts.SourceFile): string {
     if (!exprNode) {
-        needsSlot = true;
-        return `${nameSlot}(${anchor}, ${exprText});`;
+        return `${ns}.slot(${anchor}, ${exprText});`;
     }
 
     if (isNestedHtmlTemplate(exprNode)) {
@@ -140,12 +105,10 @@ function generateNodeBinding(anchor: string, exprText: string, exprNode: ts.Expr
 
     switch (slotType) {
         case 'effect':
-            needsEffectSlot = true;
-            return `new ${nameEffectSlot}(${anchor}, ${exprText});`;
+            return `new ${ns}.EffectSlot(${anchor}, ${exprText});`;
 
         case 'array-slot':
-            needsArraySlot = true;
-            return `new ${nameArraySlot}(${anchor}, ${exprText});`;
+            return `new ${ns}.ArraySlot(${anchor}, ${exprText});`;
 
         case 'static':
             return `${anchor}.textContent = ${exprText};`;
@@ -154,8 +117,7 @@ function generateNodeBinding(anchor: string, exprText: string, exprNode: ts.Expr
             return `${anchor}.parentNode.insertBefore(${exprText}, ${anchor});`;
 
         default:
-            needsSlot = true;
-            return `${nameSlot}(${anchor}, ${exprText});`;
+            return `${ns}.slot(${anchor}, ${exprText});`;
     }
 }
 
@@ -237,7 +199,6 @@ function generateTemplateCode(
                         );
 
                     for (let k = 0, o = bindings.length; k < o; k++) {
-                        trackBindingUsage(bindings[k]);
                         code.push(bindings[k]);
                     }
 
@@ -251,7 +212,6 @@ function generateTemplateCode(
                             slot.attributes.statics[name] || ''
                         );
 
-                    trackBindingUsage(binding);
                     code.push(binding);
                 }
             }
@@ -381,14 +341,6 @@ function rewriteExpression(expr: ts.Expression, sourceFile: ts.SourceFile): stri
     return applyReplacementsReverse(expr.getText(sourceFile), replacements);
 }
 
-function trackBindingUsage(binding: string): void {
-    if (binding.startsWith(nameEvent + '.')) {
-        needsEvent = true;
-    }
-    else if (binding.startsWith(nameAttr + '.')) {
-        needsAttr = true;
-    }
-}
 
 
 const addArraySlotImport = (code: string): string => {
@@ -402,17 +354,7 @@ const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFil
 
     hoistedFactories.clear();
     htmlToTemplateId.clear();
-    nameArraySlot = uid('ArraySlot');
-    nameAttr = uid('attr');
-    nameEffectSlot = uid('EffectSlot');
-    nameEvent = uid('event');
-    nameSlot = uid('slot');
-    nameTemplate = uid('template');
-    needsArraySlot = false;
-    needsAttr = false;
-    needsEffectSlot = false;
-    needsEvent = false;
-    needsSlot = false;
+    ns = uid('t');
 
     let rootTemplates = templates.filter(t => !isNestedTemplate(t, templates));
 
@@ -468,7 +410,7 @@ const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFil
         let factories: string[] = [];
 
         for (let [id, html] of hoistedFactories) {
-            factories.push(`const ${id} = ${nameTemplate}(\`${html}\`);`);
+            factories.push(`const ${id} = ${ns}.template(\`${html}\`);`);
         }
 
         code = generateImports() + '\n\n' + factories.join('\n') + '\n\n' + code;
@@ -489,7 +431,7 @@ const generateReactiveInlining = (calls: ReactiveCallInfo[], code: string, sourc
         let call = calls[i];
 
         result = result.slice(0, call.start);
-        result += `new ${nameArraySlot}(
+        result += `new ${ns}.ArraySlot(
                 ${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)},
                 ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)}
             )`;
@@ -500,9 +442,9 @@ const generateReactiveInlining = (calls: ReactiveCallInfo[], code: string, sourc
 };
 
 const getNames = () => ({
-    attr: nameAttr,
-    event: nameEvent,
-    slot: nameSlot
+    attr: `${ns}.attributes`,
+    event: `${ns}.event`,
+    slot: `${ns}.slot`
 });
 
 const needsArraySlotImport = (sourceFile: ts.SourceFile): boolean => {