@knapsack/renderer-web-components 5.0.0--canary.6593.4738696.0 → 5.0.0

package/dist/renderer-web-components.js

@@ -1,19 +1,7 @@
 "use strict";
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _KnapsackWebComponentRenderer_instances, _KnapsackWebComponentRenderer_customElementManifestPath, _KnapsackWebComponentRenderer_analyzeResults, _KnapsackWebComponentRenderer_analyzeManifest;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KnapsackWebComponentRenderer = void 0;
 const chokidar_1 = __importDefault(require("chokidar"));
@@ -23,342 +11,374 @@ const types_1 = require("@knapsack/types");
 const path_1 = require("path");
 const file_utils_1 = require("@knapsack/file-utils");
 const cheerio_1 = require("cheerio");
+const zod_1 = require("zod");
 const utils_1 = require("./utils");
 const pkg = JSON.parse((0, file_utils_1.readFileSync)((0, path_1.join)(__dirname, '../package.json')));
+const OptionSchema = zod_1.z
+    .strictObject({
+    /**
+     * Path to a custom-elements.json file.
+     * https://github.com/runem/web-component-analyzer
+     */
+    customElementManifestSchemaPath: zod_1.z.string().optional(),
+    /**
+     * Function to wrap demo content.
+     */
+    demoWrapper: zod_1.z
+        .custom()
+        .optional(),
+})
+    .meta({
+    id: types_1.rendererIds['web-components'],
+    title: 'Web Components',
+});
 class KnapsackWebComponentRenderer extends renderers_1.RendererBase {
-    constructor({ customElementManifestSchemaPath, } = {}) {
+    #customElementManifestPath;
+    #analyzeResults = Promise.resolve([]);
+    #demoWrapper;
+    constructor(options = {}) {
+        const { error: optionsError } = OptionSchema.safeParse(options);
+        const { customElementManifestSchemaPath, demoWrapper } = options;
         super({
             id: types_1.rendererIds['web-components'],
             language: 'html',
             codeSrcsUserConfig: [],
         });
-        _KnapsackWebComponentRenderer_instances.add(this);
-        _KnapsackWebComponentRenderer_customElementManifestPath.set(this, void 0);
-        _KnapsackWebComponentRenderer_analyzeResults.set(this, Promise.resolve([]));
-        this.setConfig = (opt) => {
-            super.setConfig(opt);
-            if (__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f")) {
-                const { absolutePath, exists } = this.resolvePathSync({
-                    path: __classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f"),
-                    resolveFromDir: this.userConfigDir,
-                });
-                if (!exists) {
-                    throw new Error(`Cannot find custom element manifest schema at ${__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f")}`);
-                }
-                __classPrivateFieldSet(this, _KnapsackWebComponentRenderer_customElementManifestPath, absolutePath, "f");
-                __classPrivateFieldSet(this, _KnapsackWebComponentRenderer_analyzeResults, __classPrivateFieldGet(this, _KnapsackWebComponentRenderer_instances, "m", _KnapsackWebComponentRenderer_analyzeManifest).call(this), "f");
+        if (optionsError) {
+            this.log.error(`"KnapsackWebComponentRenderer" constructor has invalid options, please fix in "knapsack.config.cjs":`, zod_1.z.prettifyError(optionsError));
+            process.exit(1);
+            return;
+        }
+        this.#customElementManifestPath = customElementManifestSchemaPath;
+        this.#demoWrapper = demoWrapper;
+    }
+    setConfig = (opt) => {
+        super.setConfig(opt);
+        if (this.#customElementManifestPath) {
+            const { absolutePath, exists } = this.resolvePathSync({
+                path: this.#customElementManifestPath,
+                resolveFromDir: this.userConfigDir,
+            });
+            if (!exists) {
+                throw new Error(`Cannot find custom element manifest schema at ${this.#customElementManifestPath}`);
             }
-        };
-        this.render = async (opt) => {
-            const usage = await this.getUsage(opt);
+            this.#customElementManifestPath = absolutePath;
+            this.#analyzeResults = this.#analyzeManifest();
+        }
+    };
+    async #analyzeManifest() {
+        if (!this.#customElementManifestPath)
+            return;
+        try {
+            const { analyzeManifest } = await import('./analyze/index.mjs');
+            const customElementManifest = await (0, file_utils_1.readJSON)(this.#customElementManifestPath);
+            return analyzeManifest({ customElementManifest });
+        }
+        catch (e) {
+            throw new Error(`Errors in custom element manifest from "${this.#customElementManifestPath}".\n${e.message}`);
+        }
+    }
+    render = async (opt) => {
+        const usage = await this.getUsage(opt);
+        if (this.#demoWrapper) {
+            const contents = await this.#demoWrapper({ content: usage });
             return {
                 ok: true,
-                html: await (0, file_utils_1.formatCode)({
-                    contents: usage,
-                    path: 'x.html',
-                }),
+                // what is actually rendered in the iframe - which includes the demo wrapper (no need to format it)
+                html: contents,
+                // shows in code block - so we format it w/o demo wrapper
+                usage: await (0, file_utils_1.formatCode)({ contents, path: 'x.html' }),
             };
+        }
+        return {
+            ok: true,
+            // both renderer in iframe AND in code block since `usage` is not returned
+            html: await (0, file_utils_1.formatCode)({ contents: usage, path: 'x.html' }),
         };
-        this.getUsage = async ({ demo, state }) => {
-            if (!demo) {
-                throw new Error(`No demo provide when rendering `);
+    };
+    getUsage = async ({ demo, state }) => {
+        if (!demo) {
+            throw new Error(`No demo provide when rendering `);
+        }
+        switch (demo.type) {
+            case 'template': {
+                const { templateInfo } = demo;
+                const { absolutePath, exists } = await this.resolvePath(templateInfo.path);
+                if (!exists) {
+                    throw new Error(`Cannot find template demo at ${absolutePath}`);
+                }
+                return (0, file_utils_1.readFile)(absolutePath);
             }
-            switch (demo.type) {
-                case 'template': {
-                    const { templateInfo } = demo;
-                    const { absolutePath, exists } = await this.resolvePath(templateInfo.path);
-                    if (!exists) {
-                        throw new Error(`Cannot find template demo at ${absolutePath}`);
-                    }
-                    return (0, file_utils_1.readFile)(absolutePath);
+            case 'data-w-template-info':
+            case 'data': {
+                const { elementName } = this.normalizeDemo({ demo, state });
+                const { data: { props, slots, slotsOptionsComputed }, } = demo;
+                if (!slots) {
+                    return (0, utils_1.getUsage)({
+                        templateName: elementName,
+                        props,
+                    });
                 }
-                case 'data-w-template-info':
-                case 'data': {
-                    const { elementName } = this.normalizeDemo({ demo, state });
-                    const { data: { props, slots, slotsOptionsComputed }, } = demo;
-                    if (!slots) {
-                        return (0, utils_1.getUsage)({
-                            templateName: elementName,
-                            props,
-                        });
-                    }
-                    const children = [];
-                    await Promise.all(Object.keys(slots).map(async (slotName) => {
-                        const slottedTemplates = slots[slotName];
-                        await Promise.all(slottedTemplates.map(async (slottedTemplate) => {
-                            if (slottedTemplate.type === 'text') {
-                                return {
-                                    slottedTemplate,
-                                    content: slottedTemplate.text,
-                                };
-                            }
-                            if (slottedTemplate.type === 'template-reference') {
-                                throw new Error(`Cannot handle slotted template references in ${JSON.stringify({
-                                    demoId: demo.id,
-                                    slottedTemplate,
-                                })}`);
-                            }
-                            if (!slottedTemplate.demoId) {
-                                return {
-                                    slottedTemplate,
-                                    content: '',
-                                };
-                            }
-                            const usage = await this.getUsage({
-                                demo: slottedTemplate.demo,
-                                state,
-                            });
+                const children = [];
+                await Promise.all(Object.keys(slots).map(async (slotName) => {
+                    const slottedTemplates = slots[slotName];
+                    await Promise.all(slottedTemplates.map(async (slottedTemplate) => {
+                        if (slottedTemplate.type === 'text') {
                             return {
                                 slottedTemplate,
-                                content: usage,
+                                content: slottedTemplate.text,
                             };
-                        })).then((usages) => {
-                            var _a;
-                            const slotOptionsComputed = slotsOptionsComputed === null || slotsOptionsComputed === void 0 ? void 0 : slotsOptionsComputed[slotName];
-                            const { openTag, closeTag } = (0, renderers_1.createSlotOptionsHtmlTags)({
-                                slotOptionsComputed,
-                                classAttributeName: 'class',
-                                stylesValueType: 'string',
-                            });
-                            const content = usages.map((usage) => usage.content).join('\n');
-                            if (slotName === 'default') {
-                                children.push(openTag, content, closeTag);
-                                return;
-                            }
-                            if (usages.length === 1 &&
-                                usages.every((usage) => usage.slottedTemplate.type === 'text')) {
-                                // this may be a single slot item with HTML in it
-                                const text = ((_a = usages[0].content) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-                                if (text.startsWith('<') && text.endsWith('>')) {
-                                    // looks enough like HTML given the starting and ending angle brackets
-                                    // say it was `<p>hi</p>` - we want `<p slot="my-slot">hi</p>` instead of `<div slot="my-slot"><p>hi</p></div>`
-                                    const $ = (0, cheerio_1.load)(text);
-                                    const firstElem = $('body :first');
-                                    if (firstElem) {
-                                        firstElem.attr('slot', slotName);
-                                        children.push(openTag, $('body').html(), closeTag);
-                                        return;
-                                    }
+                        }
+                        if (slottedTemplate.type === 'template-reference') {
+                            throw new Error(`Cannot handle slotted template references in ${JSON.stringify({
+                                demoId: demo.id,
+                                slottedTemplate,
+                            })}`);
+                        }
+                        if (!slottedTemplate.demoId) {
+                            return {
+                                slottedTemplate,
+                                content: '',
+                            };
+                        }
+                        const usage = await this.getUsage({
+                            demo: slottedTemplate.demo,
+                            state,
+                        });
+                        return {
+                            slottedTemplate,
+                            content: usage,
+                        };
+                    })).then((usages) => {
+                        const slotOptionsComputed = slotsOptionsComputed?.[slotName];
+                        const { openTag, closeTag } = (0, renderers_1.createSlotOptionsHtmlTags)({
+                            slotOptionsComputed,
+                            classAttributeName: 'class',
+                            stylesValueType: 'string',
+                        });
+                        const content = usages.map((usage) => usage.content).join('\n');
+                        if (slotName === 'default') {
+                            children.push(openTag, content, closeTag);
+                            return;
+                        }
+                        if (usages.length === 1 &&
+                            usages.every((usage) => usage.slottedTemplate.type === 'text')) {
+                            // this may be a single slot item with HTML in it
+                            const text = usages[0].content?.trim() || '';
+                            if (text.startsWith('<') && text.endsWith('>')) {
+                                // looks enough like HTML given the starting and ending angle brackets
+                                // say it was `<p>hi</p>` - we want `<p slot="my-slot">hi</p>` instead of `<div slot="my-slot"><p>hi</p></div>`
+                                const $ = (0, cheerio_1.load)(text);
+                                const firstElem = $('body :first');
+                                if (firstElem) {
+                                    firstElem.attr('slot', slotName);
+                                    children.push(openTag, $('body').html(), closeTag);
+                                    return;
                                 }
                             }
-                            children.push(`<div slot="${slotName}">`, openTag, content, closeTag, `</div>`);
-                        });
-                    }));
-                    const usage = await (0, utils_1.getUsage)({
-                        templateName: elementName,
-                        props,
-                        children: children.filter(Boolean).join('\n'),
+                        }
+                        children.push(`<div slot="${slotName}">`, openTag, content, closeTag, `</div>`);
                     });
-                    return usage;
-                }
-                default: {
-                    const _exhaustiveCheck = demo;
-                    throw new Error(`Must pass in a known demo.type, received ${JSON.stringify(demo)}`);
-                }
-            }
-        };
-        this.inspect = async ({ elementName }) => {
-            const results = await __classPrivateFieldGet(this, _KnapsackWebComponentRenderer_analyzeResults, "f");
-            if (!results.length) {
-                return {
-                    type: 'renderer.noInspectSupported',
-                };
+                }));
+                const usage = await (0, utils_1.getUsage)({
+                    templateName: elementName,
+                    props,
+                    children: children.filter(Boolean).join('\n'),
+                });
+                return usage;
             }
-            const result = results.find((r) => r.tagName === elementName);
-            if (!result) {
-                return {
-                    type: 'noSpecInferred',
-                };
+            default: {
+                const _exhaustiveCheck = demo;
+                throw new Error(`Must pass in a known demo.type, received ${JSON.stringify(demo)}`);
             }
-            return { type: 'success', spec: result.spec };
-        };
-        this.getDiscovery = async () => {
-            const results = await __classPrivateFieldGet(this, _KnapsackWebComponentRenderer_analyzeResults, "f");
+        }
+    };
+    inspect = async ({ elementName }) => {
+        const results = await this.#analyzeResults;
+        if (!results.length) {
             return {
-                rendererId: this.id,
-                meta: this.getMeta(),
-                codeSrcsByPath: Object.fromEntries(this.codeSrcs.entries()),
-                templates: results.map(({ tagName }) => (0, types_1.addIdToTemplateInfo)({
-                    rendererId: this.id,
-                    elementName: tagName,
-                })),
+                type: 'renderer.noInspectSupported',
             };
+        }
+        const result = results.find((r) => r.tagName === elementName);
+        if (!result) {
+            return {
+                type: 'noSpecInferred',
+            };
+        }
+        return { type: 'success', spec: result.spec };
+    };
+    getDiscovery = async () => {
+        const results = await this.#analyzeResults;
+        return {
+            rendererId: this.id,
+            meta: this.getMeta(),
+            codeSrcsByPath: Object.fromEntries(this.codeSrcs.entries()),
+            templates: results.map(({ tagName }) => (0, types_1.addIdToTemplateInfo)({
+                rendererId: this.id,
+                elementName: tagName,
+            })),
         };
-        this.getTemplateSuggestions = async ({ state, }) => {
-            const { templates } = await this.getDiscovery();
-            if (templates.length === 0)
-                return { suggestions: [] };
-            const tagNames = templates.map(({ elementName }) => elementName);
-            const usedNames = Object.values(state.patterns).flatMap((p) => p.templates
-                .filter((t) => t.templateLanguageId === this.id)
-                .map((t) => t.alias));
-            const suggestions = [
-                // Used names with connected: true
-                ...usedNames.map((name) => ({
-                    alias: name,
-                    path: '',
-                    connected: true,
-                })),
-                // Unused names with connected: false
-                ...tagNames
-                    .filter((name) => !usedNames.includes(name))
-                    .map((name) => ({
-                    alias: name,
-                    path: '',
-                    connected: false,
-                })),
-            ];
-            return { suggestions };
-        };
-        this.watch = async () => {
-            super.watch();
-            if (!__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f"))
-                return;
-            const watcher = chokidar_1.default.watch(__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f"), {
-                ignoreInitial: true,
-            });
-            watcher.on('change', () => {
-                __classPrivateFieldSet(this, _KnapsackWebComponentRenderer_analyzeResults, __classPrivateFieldGet(this, _KnapsackWebComponentRenderer_instances, "m", _KnapsackWebComponentRenderer_analyzeManifest).call(this), "f");
-                app_1.knapsackEvents.emitAppClientDataChanged();
-                this.onChange();
-            });
-            app_1.knapsackEvents.onShutdown(() => watcher.close());
-        };
-        this.getMeta = () => ({
-            id: this.id,
-            title: 'Web Components',
-            aliasUse: 'required',
-            aliasTitle: 'Custom Element Name',
-            aliasDescription: 'The custom element tag name (ex. my-card)',
-            enableDataDemos: true,
-            enableTemplateDemos: true,
-            hasSlotsSupport: true,
-            hasSlotOptionsSupport: true,
-            version: pkg.version,
-            hasInferSpecSupport: !!__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f"),
-            hasTemplateSuggestionsSupport: !!__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f"),
-            prototypingTemplate: {
+    };
+    getTemplateSuggestions = async ({ state, }) => {
+        const { templates } = await this.getDiscovery();
+        if (templates.length === 0)
+            return { suggestions: [] };
+        const tagNames = templates.map(({ elementName }) => elementName);
+        const usedNames = Object.values(state.patterns).flatMap((p) => p.templates
+            .filter((t) => t.templateLanguageId === this.id)
+            .map((t) => t.alias));
+        const suggestions = [
+            // Used names with connected: true
+            ...usedNames.map((name) => ({
+                alias: name,
                 path: '',
-                alias: 'div',
-                spec: {
-                    isInferred: false,
-                    props: {
-                        type: 'object',
-                        properties: {},
-                    },
-                    slots: {
-                        default: { title: 'Content' },
-                    },
+                connected: true,
+            })),
+            // Unused names with connected: false
+            ...tagNames
+                .filter((name) => !usedNames.includes(name))
+                .map((name) => ({
+                alias: name,
+                path: '',
+                connected: false,
+            })),
+        ];
+        return { suggestions };
+    };
+    watch = async () => {
+        super.watch();
+        if (!this.#customElementManifestPath)
+            return;
+        const watcher = chokidar_1.default.watch(this.#customElementManifestPath, {
+            ignoreInitial: true,
+        });
+        watcher.on('change', () => {
+            this.#analyzeResults = this.#analyzeManifest();
+            app_1.knapsackEvents.emitAppClientDataChanged();
+            this.onChange();
+        });
+        app_1.knapsackEvents.onShutdown(() => watcher.close());
+    };
+    getMeta = () => ({
+        id: this.id,
+        title: 'Web Components',
+        aliasUse: 'required',
+        aliasTitle: 'Custom Element Name',
+        aliasDescription: 'The custom element tag name (ex. my-card)',
+        enableDataDemos: true,
+        enableTemplateDemos: true,
+        hasSlotsSupport: true,
+        hasSlotOptionsSupport: true,
+        version: pkg.version,
+        hasInferSpecSupport: !!this.#customElementManifestPath,
+        hasTemplateSuggestionsSupport: !!this.#customElementManifestPath,
+        prototypingTemplate: {
+            path: '',
+            alias: 'div',
+            spec: {
+                isInferred: false,
+                props: {
+                    type: 'object',
+                    properties: {},
+                },
+                slots: {
+                    default: { title: 'Content' },
                 },
             },
-        });
-        this.getTemplateMeta = async ({ pattern, template, }) => {
-            var _a, _b, _c;
-            const files = [];
-            const htmlCustomData = {
-                version: 1.1,
-                tags: [],
-            };
-            if ((0, types_1.isSpecNotInferred)(template.spec)) {
-                const { spec } = template;
-                const typeDefs = await KnapsackWebComponentRenderer.convertSchemaToTypeScriptDefs({
-                    schema: template.spec.props,
-                    title: pattern.id,
-                    patternId: pattern.id,
-                    templateId: template.id,
-                });
-                const attributes = [];
-                Object.entries(((_a = spec.props) === null || _a === void 0 ? void 0 : _a.properties) || {}).forEach(([name, meta]) => {
-                    var _a, _b, _c;
-                    const descriptions = [];
-                    const attr = {
-                        name,
-                    };
-                    const isRequired = (_c = (_b = (_a = spec.props) === null || _a === void 0 ? void 0 : _a.required) === null || _b === void 0 ? void 0 : _b.includes(name)) !== null && _c !== void 0 ? _c : false;
-                    if (isRequired) {
-                        descriptions.push('(required)');
-                    }
-                    if ((0, types_1.isOptionsProp)(meta)) {
-                        attr.values = meta.enum.map((option) => ({
-                            name: String(option),
-                        }));
-                    }
-                    else if ((0, types_1.isBooleanProp)(meta)) {
-                        descriptions.push('boolean');
-                    }
-                    if (meta.description)
-                        descriptions.push(meta.description);
-                    attr.description = descriptions.join(' ');
-                    attributes.push(attr);
-                });
-                htmlCustomData.tags.push({
-                    name: template.alias,
-                    description: (_b = pattern.description) !== null && _b !== void 0 ? _b : '',
-                    references: [
-                        {
-                            name: 'Knapsack Docs',
-                            // @todo pull in base url
-                            url: `http://localhost:3999/pattern/${pattern.id}/${template.id}`,
-                        },
-                    ],
-                    attributes,
-                });
-                files.push({
-                    contents: JSON.stringify(htmlCustomData, null, '  '),
-                    encoding: 'utf8',
-                    path: `${pattern.id}.${template.id}.html-data.json`,
-                });
-                files.push({
-                    contents: typeDefs,
-                    encoding: 'utf8',
-                    path: `${pattern.id}.${template.id}.spec.d.ts`,
-                });
-                if (Object.keys(((_c = template.spec.props) === null || _c === void 0 ? void 0 : _c.properties) || {}).length > 0) {
-                    files.push({
-                        contents: JSON.stringify(template.spec.props, null, '  '),
-                        encoding: 'utf8',
-                        path: `${pattern.id}.${template.id}.spec.json`,
-                    });
-                }
-            }
-            return files;
+        },
+    });
+    getTemplateMeta = async ({ pattern, template, }) => {
+        const files = [];
+        const htmlCustomData = {
+            version: 1.1,
+            tags: [],
         };
-        this.alterTemplateMetaFiles = async ({ files, }) => {
-            const newFiles = [];
-            const htmlCustomData = {
-                version: 1.1,
-                tags: [],
-            };
-            files.forEach((file) => {
-                if (!file.path.endsWith('html-data.json')) {
-                    newFiles.push(file);
+        if ((0, types_1.isSpecNotInferred)(template.spec)) {
+            const { spec } = template;
+            const typeDefs = await KnapsackWebComponentRenderer.convertSchemaToTypeScriptDefs({
+                schema: template.spec.props,
+                title: pattern.id,
+                patternId: pattern.id,
+                templateId: template.id,
+            });
+            const attributes = [];
+            Object.entries(spec.props?.properties || {}).forEach(([name, meta]) => {
+                const descriptions = [];
+                const attr = {
+                    name,
+                };
+                const isRequired = spec.props?.required?.includes(name) ?? false;
+                if (isRequired) {
+                    descriptions.push('(required)');
                 }
-                else {
-                    const data = JSON.parse(file.contents);
-                    data.tags.forEach((tag) => htmlCustomData.tags.push(tag));
+                if ((0, types_1.isOptionsProp)(meta)) {
+                    attr.values = meta.enum.map((option) => ({
+                        name: String(option),
+                    }));
+                }
+                else if ((0, types_1.isBooleanProp)(meta)) {
+                    descriptions.push('boolean');
                 }
+                if (meta.description)
+                    descriptions.push(meta.description);
+                attr.description = descriptions.join(' ');
+                attributes.push(attr);
             });
-            newFiles.push({
+            htmlCustomData.tags.push({
+                name: template.alias,
+                description: pattern.description ?? '',
+                references: [
+                    {
+                        name: 'Knapsack Docs',
+                        // @todo pull in base url
+                        url: `http://localhost:3999/pattern/${pattern.id}/${template.id}`,
+                    },
+                ],
+                attributes,
+            });
+            files.push({
                 contents: JSON.stringify(htmlCustomData, null, '  '),
                 encoding: 'utf8',
-                path: `knapsack.html-data.json`,
+                path: `${pattern.id}.${template.id}.html-data.json`,
+            });
+            files.push({
+                contents: typeDefs,
+                encoding: 'utf8',
+                path: `${pattern.id}.${template.id}.spec.d.ts`,
             });
-            return newFiles;
+            if (Object.keys(template.spec.props?.properties || {}).length > 0) {
+                files.push({
+                    contents: JSON.stringify(template.spec.props, null, '  '),
+                    encoding: 'utf8',
+                    path: `${pattern.id}.${template.id}.spec.json`,
+                });
+            }
+        }
+        return files;
+    };
+    alterTemplateMetaFiles = async ({ files, }) => {
+        const newFiles = [];
+        const htmlCustomData = {
+            version: 1.1,
+            tags: [],
         };
-        __classPrivateFieldSet(this, _KnapsackWebComponentRenderer_customElementManifestPath, customElementManifestSchemaPath, "f");
-    }
+        files.forEach((file) => {
+            if (!file.path.endsWith('html-data.json')) {
+                newFiles.push(file);
+            }
+            else {
+                const data = JSON.parse(file.contents);
+                data.tags.forEach((tag) => htmlCustomData.tags.push(tag));
+            }
+        });
+        newFiles.push({
+            contents: JSON.stringify(htmlCustomData, null, '  '),
+            encoding: 'utf8',
+            path: `knapsack.html-data.json`,
+        });
+        return newFiles;
+    };
 }
 exports.KnapsackWebComponentRenderer = KnapsackWebComponentRenderer;
-_KnapsackWebComponentRenderer_customElementManifestPath = new WeakMap(), _KnapsackWebComponentRenderer_analyzeResults = new WeakMap(), _KnapsackWebComponentRenderer_instances = new WeakSet(), _KnapsackWebComponentRenderer_analyzeManifest = async function _KnapsackWebComponentRenderer_analyzeManifest() {
-    if (!__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f"))
-        return;
-    try {
-        const { analyzeManifest } = await import('./analyze/index.mjs');
-        const customElementManifest = await (0, file_utils_1.readJSON)(__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f"));
-        return analyzeManifest({ customElementManifest });
-    }
-    catch (e) {
-        throw new Error(`Errors in custom element manifest from "${__classPrivateFieldGet(this, _KnapsackWebComponentRenderer_customElementManifestPath, "f")}".\n${e.message}`);
-    }
-};
 //# sourceMappingURL=renderer-web-components.js.map