@htmlplus/element 0.4.9 → 0.5.1

package/client/utils/request.js

@@ -3,38 +3,64 @@ import { call } from '../utils/call.js';
 import { task } from '../utils/task.js';
 import { html, render } from '../vendors/uhtml.js';
 import { getStyles } from './getStyles.js';
-import { host } from './host.js';
-const targets = new Map();
-export const request = (target, state) => {
-    let run = targets.get(target);
-    if (run)
-        return run(state);
-    run = task({
-        canStart: (states, state) => {
-            // TODO: hasChange
-            return true;
-        },
-        canRun: (states) => {
-            // TODO: shouldUpdate
-            return true;
-        },
-        run: (states) => {
+import { shadowRoot } from './shadowRoot.js';
+/**
+ * Updates the DOM with a scheduled task.
+ * @param target The component instance.
+ * @param name Property/State name.
+ * @param previous The previous value of Property/State.
+ * @param callback Invoked when the rendering phase is completed.
+ */
+export const request = (target, name, previous, callback) => {
+    var _a, _b;
+    // Creates/Gets a stacks.
+    const stacks = (target[_a = CONSTANTS.API_STACKS] || (target[_a] = new Map()));
+    // Creates/Updates a stack
+    const stack = stacks.get(name) || { callbacks: [], previous };
+    // Adds the callback to the stack, if exists.
+    callback && stack.callbacks.push(callback);
+    // Stores the stack.
+    stacks.set(name, stack);
+    // Creates/Gets a micro task function.
+    target[_b = CONSTANTS.API_REQUEST] || (target[_b] = task({
+        run: () => {
+            // Skips the rendering phase if DOM isn't ready.
+            if (!target[CONSTANTS.API_CONNECTED])
+                return;
+            // Calculates the states to pass into lifecycles' callbacks.
+            const states = new Map(Array.from(stacks)
+                .filter((stack) => stack[0])
+                .map((stack) => [stack[0], stack[1].previous]));
+            // Calls the lifecycle's callback before the rendering phase.
             call(target, CONSTANTS.LIFECYCLE_UPDATE, states);
-            const element = host(target);
-            render(element.shadowRoot, () => {
+            // Calculates the template.
+            const template = () => {
+                // Calculates the markup.
                 const markup = call(target, CONSTANTS.METHOD_RENDER);
+                // Calculates the styles.
                 const styles = getStyles(target);
-                if (!styles && !markup)
-                    return html ``;
+                // Returns the markup if styles don't exist.
                 if (!styles)
                     return markup;
-                if (!markup)
-                    return html `<style>${styles}</style>`;
+                // Returns the markup and styles together.
                 return html `<style>${styles}</style>${markup}`;
+            };
+            // Renders template to the DOM.
+            render(shadowRoot(target), template);
+            // Invokes requests' callback.
+            stacks.forEach((state) => {
+                state.callbacks.forEach((callback, index, callbacks) => {
+                    callback(callbacks.length - 1 != index);
+                });
             });
+            // Calls the lifecycle's callback after the rendering phase.
             call(target, CONSTANTS.LIFECYCLE_UPDATED, states);
+            // TODO: releated to the @Watch decorator.
+            target[CONSTANTS.API_LOADED] = true;
+            // Clears stacks.
+            stacks.clear();
         }
-    });
-    targets.set(target, run);
-    return run(state);
+    }));
+    // Calls the micro task.
+    call(target, CONSTANTS.API_REQUEST);
 };

package/client/utils/shadowRoot.d.ts

@@ -0,0 +1,2 @@
+import { PlusElement } from '../../types';
+export declare const shadowRoot: (target: PlusElement) => ShadowRoot | null;

package/client/utils/shadowRoot.js

@@ -0,0 +1,5 @@
+import { host } from './host.js';
+export const shadowRoot = (target) => {
+    var _a;
+    return (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+};

package/client/utils/task.d.ts

@@ -1,6 +1,6 @@
 export interface QueueOptions {
-    canStart?: (states: any, state: any) => boolean;
-    canRun?: (states: any) => boolean;
-    run: (states: any) => void;
+    canStart?: () => boolean;
+    canRun?: () => boolean;
+    run: () => void;
 }
-export declare const task: (options: QueueOptions) => (state?: any) => Promise<boolean>;
+export declare const task: (options: QueueOptions) => () => Promise<boolean>;

package/client/utils/task.js

@@ -1,10 +1,8 @@
 export const task = (options) => {
-    let isPending, states, updatePromise;
-    const run = (state) => {
-        const newStates = Object.assign({}, states, state);
-        if (options.canStart && !options.canStart(newStates, state))
+    let isPending, updatePromise;
+    const run = () => {
+        if (options.canStart && !options.canStart())
             return Promise.resolve(false);
-        states = newStates;
         if (!isPending)
             updatePromise = enqueue();
         return updatePromise;
@@ -21,10 +19,9 @@ export const task = (options) => {
         if (!isPending)
             return updatePromise;
         try {
-            if (options.canRun && !options.canRun(states))
+            if (options.canRun && !options.canRun())
                 return (isPending = false);
-            options.run(states);
-            states = undefined;
+            options.run();
             isPending = false;
             return true;
         }

package/client/vendors/uhtml.js

@@ -319,8 +319,7 @@ var udomdiff = (parentNode, a, b, get, before) => {
 };
 const { isArray, prototype } = Array;
 const { indexOf } = prototype;
-const document = typeof window == 'undefined' ? {} : window.document;
-const { createDocumentFragment, createElement, createElementNS, createTextNode, createTreeWalker, importNode } = new Proxy(document, {
+const { createDocumentFragment, createElement, createElementNS, createTextNode, createTreeWalker, importNode } = new Proxy(typeof window == 'undefined' ? {} : window.document, {
     get: (target, method) => (target[method] || function () { }).bind(target)
 });
 const createHTML = (html) => {

package/compiler/compiler.js

@@ -1,22 +1,28 @@
 import ora from 'ora';
+import path from 'path';
 const logger = ora({
     color: 'yellow'
 });
+const log = (message, persist) => {
+    var _a, _b;
+    (_b = (_a = logger.start(`${new Date().toLocaleTimeString()} [HTMLPLUS] ${message}`))[persist ? 'succeed' : '']) === null || _b === void 0 ? void 0 : _b.call(_a);
+};
 export default (...plugins) => {
     let global = {
         contexts: []
     };
-    logger.start(`${plugins.length} Plugins found.`).succeed();
+    log(`Starting...`, true);
+    log(`${plugins.length} plugins found.`, true);
     const start = async () => {
-        logger.start('Starting...').succeed();
+        log(`Plugins are starting...`, true);
         for (const plugin of plugins) {
             if (!plugin.start)
                 continue;
-            logger.start(`Plugin '${plugin.name}' starting...`);
+            log(`Plugin '${plugin.name}' is starting...`);
             await plugin.start(global);
-            logger.start(`Plugin '${plugin.name}' started successfully.`);
+            log(`Plugin '${plugin.name}' started successfully.`);
         }
-        logger.start(`Plugins started successfully.`).succeed();
+        log(`Plugins started successfully.`, true);
     };
     const next = async (filePath) => {
         var _a;
@@ -24,15 +30,11 @@ export default (...plugins) => {
         let context = {
             filePath
         };
-        let timeout;
         for (const plugin of plugins) {
             if (!plugin.next)
                 continue;
-            clearTimeout(timeout);
-            logger.start(`Plugin '${plugin.name}' executing...`);
+            log(`Plugin '${plugin.name}' is executing on '${path.basename(filePath)}' file.`);
             const output = await plugin.next(context, global);
-            logger.start(`Plugin '${plugin.name}' executed successfully.`);
-            timeout = setTimeout(() => logger.stop(), 1500);
             // TODO
             if (output) {
                 context.outputs = ((_a = context.outputs) !== null && _a !== void 0 ? _a : [])
@@ -49,27 +51,26 @@ export default (...plugins) => {
                 });
             }
             global.contexts = global.contexts.filter((current) => current.filePath != context.filePath).concat(context);
+            log(`Plugin '${plugin.name}' executed successfully on '${path.basename(filePath)}' file.`);
             if (context.isInvalid)
                 break;
         }
+        logger.stop();
         if (context.isInvalid)
-            logger.start(`File '${key}' break executing because file is invalid.`).succeed();
+            log(`File '${key}' break executing because file is invalid.`, true);
         return context;
     };
     const finish = async () => {
-        logger.start('Finishing...').succeed();
+        log(`Plugins are finishing...`, true);
         for (const plugin of plugins) {
             if (!plugin.finish)
                 continue;
-            logger.start(`Plugin '${plugin.name}' finishing...`);
+            log(`Plugin '${plugin.name}' is finishing...`);
             await plugin.finish(global);
-            logger.start(`Plugin '${plugin.name}' finished successfully.`);
+            log(`Plugin '${plugin.name}' finished successfully.`);
         }
-        logger.start(`Plugins finished successfully.`).succeed();
-    };
-    return {
-        start,
-        next,
-        finish
+        log(`Plugins finished successfully.`, true);
+        log(`Finished.`, true);
     };
+    return { start, next, finish };
 };

package/compiler/plugins/assets.d.ts

@@ -1,5 +1,7 @@
 import { Context } from '../../types';
+export declare const ASSETS_OPTIONS: Partial<AssetsOptions>;
 export declare type AssetsOptions = {
+    once?: boolean;
     destination: (context: Context) => string;
     source?: (context: Context) => string;
 };

package/compiler/plugins/assets.js

@@ -1,6 +1,7 @@
 import fs from 'fs-extra';
 import path from 'path';
-const defaults = {
+export const ASSETS_OPTIONS = {
+    once: true,
     destination(context) {
         return `assets/${context.fileName}`;
     },
@@ -10,15 +11,21 @@ const defaults = {
 };
 export const assets = (options) => {
     const name = 'assets';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, ASSETS_OPTIONS, options);
+    const sources = new Set();
     const next = (context) => {
         var _a, _b;
-        const destination = (_a = options.destination) === null || _a === void 0 ? void 0 : _a.call(options, context);
-        const source = (_b = options.source) === null || _b === void 0 ? void 0 : _b.call(options, context);
+        const source = (_a = options.source) === null || _a === void 0 ? void 0 : _a.call(options, context);
         if (!source)
             return;
         if (!fs.existsSync(source))
             return;
+        if (options.once) {
+            if (sources.has(source))
+                return;
+            sources.add(source);
+        }
+        const destination = (_b = options.destination) === null || _b === void 0 ? void 0 : _b.call(options, context);
         fs.copySync(source, destination);
         context.assets = source;
     };

package/compiler/plugins/copy.d.ts

@@ -1,13 +1,13 @@
+export declare const COPY_OPTIONS: Partial<CopyOptions>;
 export interface CopyOptions {
-    at?: 'finish' | 'start';
+    at?: 'start' | 'next' | 'finish';
     destination: string;
     source: string;
-    transformer?: (parameters: {
-        content: string;
-    }) => string;
+    transformer?: (content: string) => string;
 }
 export declare const copy: (options: CopyOptions) => {
     name: string;
     start: () => void;
+    next: () => void;
     finish: () => void;
 };

package/compiler/plugins/copy.js

@@ -1,26 +1,29 @@
 import fs from 'fs-extra';
 import path from 'path';
-const defaults = {
-    at: 'finish',
+export const COPY_OPTIONS = {
+    at: 'start'
 };
 export const copy = (options) => {
     const name = 'copy';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, COPY_OPTIONS, options);
     const copy = (caller) => {
         if (options.at != caller)
             return;
         let content;
         content = fs.readFileSync(options.source, 'utf8');
         if (options.transformer)
-            content = options.transformer({ content });
+            content = options.transformer(content);
         fs.ensureDirSync(path.dirname(options.destination));
         fs.writeFileSync(options.destination, content, 'utf8');
     };
     const start = () => {
         copy('start');
     };
+    const next = () => {
+        copy('next');
+    };
     const finish = () => {
         copy('finish');
     };
-    return { name, start, finish };
+    return { name, start, next, finish };
 };

package/compiler/plugins/customElement.d.ts

@@ -1,4 +1,5 @@
 import { Context } from '../../types';
+export declare const CUSTOM_ELEMENT_OPTIONS: Partial<CustomElementOptions>;
 export interface CustomElementOptions {
     typings?: boolean;
 }

package/compiler/plugins/customElement.js

@@ -2,16 +2,28 @@ import t from '@babel/types';
 import { pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { addDependency, print, visitor } from '../utils/index.js';
-const defaults = {
+export const CUSTOM_ELEMENT_OPTIONS = {
+    // prefix: undefined,
     typings: true
 };
 // TODO: support {variable && jsxElement}
 export const customElement = (options) => {
     const name = 'customElement';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, CUSTOM_ELEMENT_OPTIONS, options);
     const next = (context) => {
         const ast = t.cloneNode(context.fileAST, true);
-        // attach style mapper for 'style' attribute
+        // attaches name
+        visitor(ast, {
+            ClassDeclaration(path) {
+                const { body, id } = path.node;
+                if (id.name != context.className)
+                    return;
+                const node = t.classProperty(t.identifier(CONSTANTS.STATIC_TAG), t.stringLiteral(context.componentTag), undefined, undefined, undefined, true);
+                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_PROPERTY, true);
+                body.body.unshift(node);
+            }
+        });
+        // attaches style mapper for 'style' attribute
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
@@ -21,16 +33,13 @@ export const customElement = (options) => {
                     return;
                 if (value.type != 'JSXExpressionContainer')
                     return;
-                const { local } = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTILS_STYLE_MAP, CONSTANTS.UTILS_STYLE_MAP);
+                const { local } = addDependency(path, CONSTANTS.PACKAGE_NAME, CONSTANTS.UTIL_STYLE_MAPPER, CONSTANTS.UTIL_STYLE_MAPPER);
                 // TODO: remove 'local!'
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(t.callExpression(t.identifier(local), [value.expression]))));
                 path.skip();
             }
         });
-        // TODO
-        const { node } = addDependency(ast, CONSTANTS.VENDOR_UHTML, 'uhtml');
-        t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
-        // replace 'className' attribute to 'class'
+        // replaces 'className' attribute with 'class'
         visitor(ast, {
             JSXAttribute(path) {
                 const { name, value } = path.node;
@@ -42,7 +51,7 @@ export const customElement = (options) => {
                 path.replaceWith(t.jsxAttribute(t.jsxIdentifier('class'), value));
             }
         });
-        // TODO: convert 'jsx' to 'uhtml' syntax
+        // converts 'jsx' to 'uhtml' syntax
         visitor(ast, {
             JSXAttribute: {
                 exit(path) {
@@ -86,9 +95,13 @@ export const customElement = (options) => {
                     // TODO
                     path.replaceWith(t.jsxAttribute(t.jsxIdentifier('.dataset'), t.jsxExpressionContainer(path.node.argument)));
                 }
+            },
+            Program(path) {
+                const { node } = addDependency(path, CONSTANTS.VENDOR_UHTML_PATH, 'uhtml');
+                t.addComment(node, 'leading', CONSTANTS.COMMENT_AUTO_ADDED_DEPENDENCY, true);
             }
         });
-        // attach members
+        // attaches members
         visitor(ast, {
             ClassDeclaration(path) {
                 const { body, id } = path.node;
@@ -96,6 +109,7 @@ export const customElement = (options) => {
                     return;
                 const node = t.classProperty(t.identifier(CONSTANTS.STATIC_MEMBERS), t.objectExpression([
                     ...context.classProperties.map((property) => {
+                        var _a, _b, _c, _d, _e, _f;
                         const properties = [];
                         if (property.value) {
                             properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_INITIALIZER), property.value));
@@ -114,6 +128,12 @@ export const customElement = (options) => {
                         if (type) {
                             properties.push(t.objectProperty(t.identifier(CONSTANTS.STATIC_MEMBERS_TYPE), type));
                         }
+                        // TODO
+                        // prettier-ignore
+                        (_f = (_e = (_d = (_c = (_b = (_a = property === null || property === void 0 ? void 0 : property.decorators) === null || _a === void 0 ? void 0 : _a.find((decorator) => {
+                            var _a, _b;
+                            return ((_b = (_a = decorator.expression) === null || _a === void 0 ? void 0 : _a['callee']) === null || _b === void 0 ? void 0 : _b.name) == CONSTANTS.DECORATOR_PROPERTY;
+                        })) === null || _b === void 0 ? void 0 : _b.expression) === null || _c === void 0 ? void 0 : _c['arguments']) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.forEach((property) => properties.push(property));
                         return t.objectProperty(t.identifier(property.key['name']), t.objectExpression(properties));
                     }),
                     ...context.classMethods.map((method) => t.objectProperty(t.identifier(method.key['name']), t.objectExpression([
@@ -124,14 +144,14 @@ export const customElement = (options) => {
                 body.body.unshift(node);
             }
         });
-        // attach typings
+        // attaches typings
         if (options === null || options === void 0 ? void 0 : options.typings) {
             visitor(ast, {
                 Program(path) {
                     const { body } = path.node;
                     body.push(t.exportNamedDeclaration(t.tsInterfaceDeclaration(
                     // TODO
-                    t.identifier(context.componentClassName + 'JSX'), null, [], t.tsInterfaceBody([
+                    t.identifier(context.className + 'JSX'), null, [], t.tsInterfaceBody([
                         ...context.classProperties.map((property) => Object.assign(t.tSPropertySignature(property.key, property.typeAnnotation), {
                             optional: property.optional,
                             leadingComments: t.cloneNode(property, true).leadingComments
@@ -171,7 +191,7 @@ export const customElement = (options) => {
                         t.tSModuleDeclaration(t.identifier('JSX'), t.tSModuleBlock([
                             t.tSInterfaceDeclaration(t.identifier('IntrinsicElements'), undefined, undefined, t.tSInterfaceBody([
                                 t.tSPropertySignature(t.stringLiteral(context.componentTag), t.tSTypeAnnotation(t.tSIntersectionType([
-                                    t.tSTypeReference(t.identifier(context.componentClassName + 'JSX')),
+                                    t.tSTypeReference(t.identifier(context.className + 'JSX')),
                                     t.tSTypeLiteral([
                                         t.tSIndexSignature([
                                             Object.assign({}, t.identifier('key'), {

package/compiler/plugins/customElementReact/customElementReact.d.ts

@@ -1,10 +1,17 @@
-import { Global } from '../../../types';
+import { Context, Global } from '../../../types';
+export declare const CUSTOM_ELEMENT_REACT_OPTIONS: Partial<CustomElementReactOptions>;
 export interface CustomElementReactOptions {
     compact?: boolean;
     destination: string;
     eventName?: (eventName: string) => string;
-    importerComponent?: (context: any) => string;
-    importerComponentType?: (context: any) => string;
+    importerComponent: (context: Context) => {
+        source: string;
+    };
+    importerComponentType: (context: Context) => {
+        source: string;
+        imported: string;
+        local: string;
+    };
 }
 export declare const customElementReact: (options: CustomElementReactOptions) => {
     name: string;

package/compiler/plugins/customElementReact/customElementReact.js

@@ -1,21 +1,9 @@
 import { pascalCase } from 'change-case';
 import { __dirname, isDirectoryEmpty, renderTemplate } from '../../utils/index.js';
-const defaults = {
-    compact: false,
-    destination: '',
-    eventName(eventName) {
-        return eventName;
-    },
-    importerComponent(context) {
-        return `YOUR_CORE_PACKAGE_NAME#${context.componentClassName}`;
-    },
-    importerComponentType(context) {
-        return `YOUR_CORE_PACKAGE_NAME#JSX.${context.componentClassName}`;
-    }
-};
+export const CUSTOM_ELEMENT_REACT_OPTIONS = {};
 export const customElementReact = (options) => {
     const name = 'customElementReact';
-    options = Object.assign({}, defaults, options);
+    options = Object.assign({}, CUSTOM_ELEMENT_REACT_OPTIONS, options);
     const finish = (global) => {
         // TODO
         const globalNew = {
@@ -25,28 +13,19 @@ export const customElementReact = (options) => {
         const config = { cwd: __dirname(import.meta.url) };
         const isEmpty = isDirectoryEmpty(options.destination);
         const skip = [];
-        const getKey = (component) => component.componentClassName;
+        const getKey = (component) => component.className;
         for (const key in globalNew.contexts) {
             const context = globalNew.contexts[key];
-            const parse = (input) => {
-                const [source, key] = input.split('#');
-                const [root, ...sub] = key.split('.');
-                const variable = ['Type', ...sub].join('.');
-                return {
-                    source,
-                    variable,
-                    root
-                };
-            };
             const classEvents = context.classEvents.map((classEvent) => {
+                var _a, _b;
                 const from = 'on' + pascalCase(classEvent.key.name);
-                const to = options.eventName(from);
+                const to = (_b = (_a = options.eventName) === null || _a === void 0 ? void 0 : _a.call(options, from)) !== null && _b !== void 0 ? _b : from;
                 return Object.assign(Object.assign({}, classEvent), { from,
                     to });
             });
             const fileName = context.fileName;
-            const importerComponent = parse(options.importerComponent(context));
-            const importerComponentType = parse(options.importerComponentType(context));
+            const importerComponent = options.importerComponent(context);
+            const importerComponentType = options.importerComponentType(context);
             const state = Object.assign(Object.assign({}, context), { classEvents,
                 fileName,
                 importerComponent,
@@ -77,26 +56,14 @@ export const customElementReact = (options) => {
                     .reverse()
                     .map((component, index) => {
                     const componentClassNameInCategory = getKey(component).replace(group.key, '');
-                    const parse = (input) => {
-                        const [source, key] = input.split('#');
-                        const [root, ...sub] = key.split('.');
-                        const local = root + (index + 1);
-                        const variable = [local, ...sub].join('.');
-                        return {
-                            source,
-                            variable,
-                            root,
-                            local
-                        };
-                    };
-                    const importerComponent = parse(options.importerComponent(component));
-                    const importerComponentType = parse(options.importerComponentType(component));
+                    const importerComponent = options.importerComponent(component);
+                    const importerComponentType = options.importerComponentType(component);
                     return Object.assign(Object.assign({}, component), { componentClassNameInCategory,
                         importerComponent,
                         importerComponentType });
                 })
                     // TODO: experimental
-                    .sort((a, b) => (b.componentClassName < a.componentClassName ? 0 : -1));
+                    .sort((a, b) => (getKey(b) < getKey(a) ? 0 : -1));
                 return {
                     all,
                     filterd: all.slice(1),

package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.compact.ts.hbs

@@ -3,13 +3,16 @@
  **************************************************/
  
 {{#each all}}
-import { {{componentClassNamePrune}} } from './{{fileName}}';
+import { {{className}} } from './{{fileName}}';
 {{/each}}
 
-const All = Object.assign({{root.componentClassNamePrune}}, {
-  {{#each filterd}}
-  {{componentClassNameInCategory}}: {{componentClassNamePrune}},
-  {{/each}}
-});
+const All = Object.assign(
+  {{root.className}},
+  {
+    {{#each filterd}}
+    {{componentClassNameInCategory}}: {{className}},
+    {{/each}}
+  }
+);
 
-export { All as {{root.componentClassNamePrune}} }
+export { All as {{root.className}} }

package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs

@@ -3,19 +3,18 @@
  **************************************************/
 
 import { proxy } from '../proxy';
+import type { Rename } from '../proxy';
 
 import '{{importerComponent.source}}';
-import type { {{importerComponentType.root}} as Type } from '{{importerComponentType.source}}';
+import type { {{importerComponentType.imported}} as {{importerComponentType.local}} } from '{{importerComponentType.source}}';
 
-type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : "Error: key not in T" }> = { [P in keyof T as P extends keyof R ? R[P] : P]: T[P] }
-
-type Renamed = Rename<{{importerComponentType.variable}}, { 
+type Renamed = Rename<{{importerComponentType.local}}, { 
   {{#each classEvents}}
   {{from}}: '{{to}}',
   {{/each}}
 }>
 
-export const {{componentClassNamePrune}} = proxy<{{componentInterfaceName}}, Renamed>(
+export const {{className}} = proxy<{{componentInterfaceName}}, Renamed>(
   '{{componentTag}}', 
   [{{#each classProperties}}'{{key.name}}', {{/each}}], 
   [{{#each classEvents}}'{{key.name}}', {{/each}}],