@ptkl/toolkit 0.7.2 → 0.8.8

package/dist/bin/toolkit.js

@@ -14,12 +14,13 @@ program.hook('preAction', (thisCommand, actionCommand) => {
 });
 commands.forEach(c => program.addCommand(c));
 program.parseAsync(process.argv).catch((err) => {
+    console.log("An error occurred while executing the command.", err);
     const { response } = err;
     if (response && response.data) {
-        console.error(response.data.message);
+        console.error(response.data.message || "An error occurred with the API request.");
     }
     else {
-        console.error(err.message || err);
+        console.error(err.message || err || "An unknown error occurred.");
     }
     process.exit(1);
 });

package/dist/builder/register.js

@@ -1,14 +1,14 @@
 import CompilerSDK4 from "./sdk4/vue2.js";
 import CompilerSDK5 from "./sdk5/vue2.js";
-import CompilerSDK5Vue3 from "./sdk5/vue3.js";
-import CompiltedSDK5React from "./sdk5/react.js";
-const latestVersion = 5;
-const defaultEngine = 'vue2';
+import CompilerSDK6WebComponents from "./sdk6/webcomponents.js";
+import CompilerSDK6Lit from "./sdk6/lit.js";
+const latestVersion = 6;
+const defaultEngine = 'webcomponents';
 const compilers = {
     'sdk4::vue2': new CompilerSDK4,
     'sdk5::vue2': new CompilerSDK5,
-    'sdk5::vue3': new CompilerSDK5Vue3,
-    'sdk5::react': new CompiltedSDK5React,
+    'sdk6::webcomponents': new CompilerSDK6WebComponents,
+    'sdk6::lit': new CompilerSDK6Lit,
 };
 export default {
     getCompiler(sdkVersion, engine) {

package/dist/builder/sdk6/lit.js

@@ -0,0 +1,52 @@
+import * as Babel from '@babel/standalone';
+import * as sass from 'sass';
+export default class Compiler {
+    async compileBabel(expression) {
+        let code = Babel.transform(expression, {
+            sourceType: "module",
+            presets: [
+                "env",
+                ["typescript", {
+                        onlyRemoveTypeImports: true,
+                        allowDeclareFields: true
+                    }]
+            ],
+            plugins: [
+                ["proposal-decorators", { version: "2023-05" }],
+                "proposal-class-properties"
+            ]
+        });
+        return code.code;
+    }
+    async compileCSS(scope, lang, expression) {
+        switch (lang) {
+            case 'scss':
+            case 'sass':
+                if (scope) {
+                    const result = sass.compileString(`.${scope} { ${expression} }`);
+                    return result.css;
+                }
+                const result = sass.compileString(expression);
+                return result.css;
+            default:
+                return expression;
+        }
+    }
+    async compile(ext, content) {
+        switch (ext) {
+            case 'js':
+            case 'ts':
+                return await this.compileBabel(content);
+            case 'css':
+                return await this.compileCSS(null, "css", content);
+            case 'scss':
+            case 'sass':
+                return await this.compileCSS(null, ext, content);
+            default:
+                return await Promise.resolve(content);
+        }
+    }
+    getSupportedExt() {
+        return ["js", "ts", "css", "scss", "sass", "json", "svg", "html"];
+    }
+}

package/dist/builder/sdk6/react.js

@@ -0,0 +1,56 @@
+import * as Babel from '@babel/standalone';
+import * as sass from 'sass';
+export default class Compiler {
+    async compileBabel(expression) {
+        let code = Babel.transform(expression, {
+            sourceType: "module",
+            presets: [
+                "env",
+                ["react", { runtime: "automatic" }],
+                ["typescript", {
+                        onlyRemoveTypeImports: true,
+                        isTSX: true,
+                        allExtensions: true
+                    }]
+            ],
+            plugins: [
+                '@babel/plugin-proposal-class-properties',
+                '@babel/plugin-transform-class-static-block'
+            ]
+        });
+        return code.code;
+    }
+    async compileCSS(scope, lang, expression) {
+        switch (lang) {
+            case 'scss':
+            case 'sass':
+                if (scope) {
+                    const result = sass.compileString(`.${scope} { ${expression} }`);
+                    return result.css;
+                }
+                const result = sass.compileString(expression);
+                return result.css;
+            default:
+                return expression;
+        }
+    }
+    async compile(ext, content) {
+        switch (ext) {
+            case 'js':
+            case 'jsx':
+            case 'ts':
+            case 'tsx':
+                return await this.compileBabel(content);
+            case 'css':
+                return await this.compileCSS(null, "css", content);
+            case 'scss':
+            case 'sass':
+                return await this.compileCSS(null, ext, content);
+            default:
+                return await Promise.resolve(content);
+        }
+    }
+    getSupportedExt() {
+        return ["js", "jsx", "ts", "tsx", "css", "scss", "sass", "json", "svg", "html"];
+    }
+}

package/dist/builder/sdk6/vue3.js

@@ -0,0 +1,52 @@
+import * as Babel from '@babel/standalone';
+import * as sass from 'sass';
+export default class Compiler {
+    async compileBabel(expression) {
+        let code = Babel.transform(expression, {
+            sourceType: "module",
+            presets: [
+                "env",
+                ["typescript", {
+                        onlyRemoveTypeImports: true,
+                        allExtensions: true
+                    }]
+            ],
+            plugins: [
+                '@babel/plugin-proposal-class-properties',
+                '@babel/plugin-transform-class-static-block'
+            ]
+        });
+        return code.code;
+    }
+    async compileCSS(scope, lang, expression) {
+        switch (lang) {
+            case 'scss':
+            case 'sass':
+                if (scope) {
+                    const result = sass.compileString(`.${scope} { ${expression} }`);
+                    return result.css;
+                }
+                const result = sass.compileString(expression);
+                return result.css;
+            default:
+                return expression;
+        }
+    }
+    async compile(ext, content) {
+        switch (ext) {
+            case 'js':
+            case 'ts':
+                return await this.compileBabel(content);
+            case 'css':
+                return await this.compileCSS(null, "css", content);
+            case 'scss':
+            case 'sass':
+                return await this.compileCSS(null, ext, content);
+            default:
+                return await Promise.resolve(content);
+        }
+    }
+    getSupportedExt() {
+        return ["js", "ts", "css", "scss", "sass", "json", "svg", "html", "vue"];
+    }
+}

package/dist/builder/sdk6/webcomponents.js

@@ -0,0 +1,41 @@
+import * as Babel from '@babel/standalone';
+import * as sass from 'sass';
+export default class Compiler {
+    async compileBabel(expression) {
+        let code = Babel.transform(expression, {
+            sourceType: "module",
+            presets: ["env"]
+        });
+        return code.code;
+    }
+    async compileCSS(scope, lang, expression) {
+        switch (lang) {
+            case 'scss':
+            case 'sass':
+                if (scope) {
+                    const result = sass.compileString(`.${scope} { ${expression} }`);
+                    return result.css;
+                }
+                const result = sass.compileString(expression);
+                return result.css;
+            default:
+                return expression;
+        }
+    }
+    async compile(ext, content) {
+        switch (ext) {
+            case 'js':
+                return await this.compileBabel(content);
+            case 'css':
+                return await this.compileCSS(null, "css", content);
+            case 'scss':
+            case 'sass':
+                return await this.compileCSS(null, ext, content);
+            default:
+                return await Promise.resolve(content);
+        }
+    }
+    getSupportedExt() {
+        return ["js", "css", "scss", "sass", "json", "svg", "html"];
+    }
+}

package/dist/commands/apiUsers.js

@@ -1,6 +1,6 @@
 import { Command } from "commander";
 import util from "../lib/util.js";
-import Api from "@ptkl/sdk";
+import { Platform as Api } from "@ptkl/sdk";
 import OutputFormatCommand from "./outputCommand.js";
 class ApiUsersCommand {
     register() {

package/dist/commands/apps.js

@@ -1,6 +1,6 @@
 import { Command, Option } from "commander";
 import util from "../lib/util.js";
-import Api from "@ptkl/sdk";
+import { Platform as Api } from "@ptkl/sdk";
 import { build, createServer } from 'vite';
 import { c } from 'tar';
 import { Writable } from "stream";
@@ -129,7 +129,7 @@ class AppsCommand {
     async bundle(options) {
         const { path, upload } = options;
         const module = await import(`${path}/ptkl.config.js`);
-        const { views, name, version, distPath, icon, label, permissions, } = module.default ?? {};
+        const { views, name, version, distPath, icon, label, permissions, install_permissions, runtime_permissions, requires, scripts, } = module.default ?? {};
         // build manifest file
         const manifest = {
             name,
@@ -138,6 +138,10 @@ class AppsCommand {
             label,
             icon,
             permissions,
+            install_permissions: install_permissions ?? [],
+            runtime_permissions: runtime_permissions ?? [],
+            requires: requires ?? null,
+            scripts,
         };
         const profile = Util.getCurrentProfile();
         const client = Util.getClientForProfile();
@@ -161,9 +165,29 @@ class AppsCommand {
                 }
             });
         });
+        console.log("manifest", manifest);
+        const buildScripts = Object.keys(scripts).map((script) => {
+            manifest.scripts[script] = `${script}.script.js`;
+            return build({
+                root: path,
+                base,
+                build: {
+                    rollupOptions: {
+                        input: scripts[script],
+                        output: {
+                            format: 'iife',
+                            entryFileNames: `${script}.script.js`,
+                        }
+                    }
+                }
+            });
+        });
         await Promise.allSettled(buildViews).catch(err => {
             console.error('Error building:', err);
         });
+        await Promise.allSettled(buildScripts).catch(err => {
+            console.error('Error building:', err);
+        });
         console.log("Packaging app...");
         // // write manifest file
         const manifestPath = `${distPath}/manifest.json`;

package/dist/commands/component.js

@@ -1,10 +1,16 @@
 import { Command } from "commander";
 import Builder from "../builder/index.js";
 import { WebSocketServer } from "ws";
-import { resolve } from "path";
+import { resolve, join, dirname } from "path";
 import { rollup } from "rollup";
 import util from "../lib/util.js";
-import Api from "@ptkl/sdk";
+import { Platform as Api } from "@ptkl/sdk";
+import { mkdirSync, writeFileSync, rmSync, readdirSync, existsSync, readFileSync } from "fs";
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+// @ts-ignore
+import commonjsPlugin from '@rollup/plugin-commonjs';
+import { babel as babelPlugin } from '@rollup/plugin-babel';
+import { execSync } from 'child_process';
 class ComponentCommand {
     register() {
         return new Command("component")
@@ -13,37 +19,314 @@ class ComponentCommand {
             .addCommand(new Command("builder")
             .description("Run builder for component templates")
             .requiredOption("-v, --version <version>", "SDK version to be used for build", "6")
-            .requiredOption("-e, --engine <engine>", "SDK engine to be used for build", "react")
-            .action(this.builder))
+            .requiredOption("-e, --engine <engine>", "SDK engine to be used for build", "webcomponents")
+            .option("-p, --port <port>", "WSS port", "11403")
+            .action(this.builder.bind(this)))
             .addCommand(new Command("build")
             .description("Build templates for component")
             .requiredOption("-p, --path <path>", "Path to the source files", "./")
             .action(this.build));
     }
+    nodesToActualFiles(nodes, basePath) {
+        nodes.forEach((node) => {
+            const currentPath = join(basePath, node.name);
+            if (node.isLeaf) {
+                // Create directory for the file if it doesn't exist
+                const dir = dirname(currentPath);
+                mkdirSync(dir, { recursive: true });
+                // Write the file content
+                writeFileSync(currentPath, node.content || '');
+            }
+            else {
+                // Create directory
+                mkdirSync(currentPath, { recursive: true });
+                // Process children recursively
+                if (node.children && node.children.length > 0) {
+                    this.nodesToActualFiles(node.children, basePath);
+                }
+            }
+        });
+    }
     async builder(options) {
-        const { version, engine } = options;
-        console.log(`Running builder for SDK version ${version} with engine ${engine}`);
-        const ws = new WebSocketServer({ port: 11400 });
+        const { version, engine, port } = options;
+        console.log(`Running builder for SDK version ${version} with engine ${engine} on port ${port}`);
+        const ws = new WebSocketServer({ port: port ?? 11403 });
         ws.on('connection', (socket) => {
             socket.on('message', async (message) => {
-                console.log("Building component templates...");
+                console.log("\n🔨 Building component...");
                 const nodes = JSON.parse(message.toString());
-                try {
-                    let dist = null;
-                    const builder = new Builder(version, engine);
-                    const compiledFiles = await builder.buildFromNodes(nodes);
-                    dist = Object.assign({}, compiledFiles);
-                    socket.send(JSON.stringify({ dist }));
-                    console.log('Component templates built successfully');
-                    // Do something with the parsed JSON
+                // SDK 6 uses new build system with Rollup and multi-view bundling
+                if (parseInt(version) >= 6) {
+                    await this.buildSDK6(nodes, version, engine, socket);
                 }
-                catch (error) { // Bad Request
-                    socket.send(JSON.stringify({ error: error.message }));
-                    console.error(error.message);
+                else {
+                    // SDK 5 and below use the legacy build system
+                    await this.buildLegacy(nodes, version, engine, socket);
                 }
             });
         });
     }
+    async buildSDK6(nodes, version, engine, socket) {
+        // Create temporary directory with constant name
+        const tempDir = '/tmp/.ptkl/components';
+        try {
+            // Parse engine to extract framework and version (e.g., "lit@3" -> { framework: "lit", version: "3" })
+            const engineMatch = engine.match(/^([^@]+)(?:@(.+))?$/);
+            const framework = engineMatch ? engineMatch[1] : engine;
+            const frameworkVersion = engineMatch ? engineMatch[2] : null;
+            // Create temp directory
+            mkdirSync(tempDir, { recursive: true });
+            // Clear all files except node_modules
+            const entries = readdirSync(tempDir);
+            for (const entry of entries) {
+                if (entry !== 'node_modules') {
+                    const fullPath = join(tempDir, entry);
+                    rmSync(fullPath, { recursive: true, force: true });
+                }
+            }
+            // Convert nodes to actual files
+            this.nodesToActualFiles(nodes, tempDir);
+            // Look for component.js file that defines views
+            const componentsConfigPath = join(tempDir, 'component.js');
+            let viewsConfig = {};
+            if (!existsSync(componentsConfigPath)) {
+                throw new Error('component.js not found. Please create a component.js file that exports { views: { viewName: "./path/to/view.js" } }');
+            }
+            let componentConfig;
+            try {
+                // Read the component.js file as text
+                const componentContent = readFileSync(componentsConfigPath, 'utf-8');
+                // Parse the ES module manually
+                // Remove 'export default' and evaluate the object
+                const contentWithoutExport = componentContent
+                    .replace(/export\s+default\s+/, '')
+                    .trim();
+                // Use Function constructor to safely evaluate the object
+                componentConfig = new Function(`return ${contentWithoutExport}`)();
+                if (!componentConfig || !componentConfig.views) {
+                    throw new Error('component.js must export default object with "views" property');
+                }
+                viewsConfig = componentConfig.views;
+            }
+            catch (error) {
+                throw new Error(`Failed to load component.js: ${error.message}. Please ensure component.js exports { views: { viewName: './path/to/view.js' } }`);
+            }
+            // Merge user packages with internal dependencies
+            const userPackages = componentConfig.packages || {};
+            const dependencies = {
+                '@ptkl/sdk': '^1.0.0',
+                // Lit is bundled into the component, not provided by platform
+                ...(framework === 'lit' ? {
+                    'lit': frameworkVersion ? `^${frameworkVersion}` : '^3.0.0'
+                } : {}),
+                ...userPackages
+            };
+            // Create package.json with merged dependencies
+            const packageJson = {
+                name: 'component-build',
+                version: '1.0.0',
+                type: 'module',
+                dependencies
+            };
+            const packageJsonPath = join(tempDir, 'package.json');
+            writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+            // Run npm install
+            try {
+                execSync('npm install', {
+                    cwd: tempDir,
+                    stdio: 'pipe',
+                    env: { ...process.env, NODE_ENV: 'production' }
+                });
+            }
+            catch (error) {
+                throw new Error(`npm install failed: ${error.message}`);
+            }
+            // Build each view separately with Rollup
+            const dist = {};
+            const warnings = [];
+            const viewCount = Object.keys(viewsConfig).length;
+            console.log(`📦 Bundling ${viewCount} view${viewCount !== 1 ? 's' : ''}...`);
+            for (const [viewName, viewPath] of Object.entries(viewsConfig)) {
+                const fullPath = join(tempDir, viewPath);
+                // Check and strip @customElement decorator for Lit components
+                if (framework === 'lit') {
+                    const sourceContent = readFileSync(fullPath, 'utf-8');
+                    const customElementDecoratorRegex = /@customElement\s*\(\s*['"`][^'"`]*['"`]\s*\)/g;
+                    if (customElementDecoratorRegex.test(sourceContent)) {
+                        const warning = `${viewName}: Found @customElement decorator which has been automatically removed. The platform handles element registration dynamically.`;
+                        warnings.push(warning);
+                        console.warn(`⚠️  ${warning}`);
+                        // Strip the decorator from source
+                        const strippedContent = sourceContent.replace(/@customElement\s*\(\s*['"`][^'"`]*['"`]\s*\)/g, '');
+                        writeFileSync(fullPath, strippedContent, 'utf-8');
+                    }
+                }
+                // Configure Babel based on framework
+                let babelConfig = null;
+                if (framework === 'lit') {
+                    babelConfig = {
+                        babelHelpers: 'bundled',
+                        extensions: ['.js', '.ts'],
+                        presets: [
+                            ['@babel/preset-typescript', {
+                                    onlyRemoveTypeImports: true,
+                                    allowDeclareFields: true
+                                }]
+                        ],
+                        plugins: [
+                            ['@babel/plugin-proposal-decorators', { legacy: true }],
+                            '@babel/plugin-proposal-class-properties',
+                            '@babel/plugin-transform-class-static-block'
+                        ]
+                    };
+                }
+                else if (framework === 'webcomponents') {
+                    babelConfig = {
+                        babelHelpers: 'bundled',
+                        extensions: ['.js', '.ts'],
+                        presets: [
+                            ['@babel/preset-typescript', {
+                                    onlyRemoveTypeImports: true,
+                                    allowDeclareFields: true
+                                }]
+                        ],
+                        plugins: [
+                            '@babel/plugin-proposal-class-properties',
+                            '@babel/plugin-transform-class-static-block'
+                        ]
+                    };
+                }
+                // Define external dependencies based on framework
+                const getExternalDependencies = (framework) => {
+                    const externalDeps = [];
+                    // Lit is bundled into the component, not externalized
+                    // webcomponents framework has no external dependencies
+                    return externalDeps;
+                };
+                const bundle = await rollup({
+                    input: fullPath,
+                    plugins: [
+                        nodeResolve({
+                            browser: true,
+                            preferBuiltins: false,
+                            extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue']
+                        }),
+                        // Add Babel plugin if configured
+                        ...(babelConfig ? [babelPlugin(babelConfig)] : []),
+                        // @ts-ignore
+                        commonjsPlugin(),
+                    ],
+                    // Externalize framework dependencies - platform provides them
+                    external: (id) => {
+                        const externalDeps = getExternalDependencies(framework);
+                        return externalDeps.some(dep => {
+                            if (typeof dep === 'string') {
+                                return id === dep;
+                            }
+                            return dep.test(id);
+                        });
+                    },
+                    onwarn: (warning, warn) => {
+                        if (warning.code === 'UNRESOLVED_IMPORT') {
+                            console.warn(`⚠️  Unresolved import in ${viewName}`);
+                            return;
+                        }
+                        warn(warning);
+                    },
+                });
+                const { output } = await bundle.generate({
+                    format: 'esm',
+                    sourcemap: false,
+                    inlineDynamicImports: true,
+                });
+                // Add to dist with view name
+                output.forEach((chunk) => {
+                    if (chunk.type === 'chunk') {
+                        let code = chunk.code;
+                        // Check for common issues and add warnings
+                        // 1. Check if code contains customElements.define and remove it
+                        // Handle various formats including multiline
+                        const customElementsDefineRegex = /customElements\.define\s*\([^)]*\([\s\S]*?\)\s*\)\s*;?|customElements\.define\s*\([^)]*\)\s*;?/g;
+                        const hasCustomElementsDefine = customElementsDefineRegex.test(code);
+                        if (hasCustomElementsDefine) {
+                            const warning = `${viewName}: Found customElements.define() which has been automatically removed. The platform handles element registration dynamically based on component context.`;
+                            warnings.push(warning);
+                            console.warn(`⚠️  ${warning}`);
+                            // Remove customElements.define calls (reset regex after test)
+                            code = code.replace(/customElements\.define\s*\([^)]*\([\s\S]*?\)\s*\)\s*;?/g, '');
+                            code = code.replace(/customElements\.define\s*\([^)]*\)\s*;?/g, '');
+                        }
+                        // 2. Check if code has a default export
+                        const hasDefaultExport = /export\s+default/.test(code) || /export\s*\{[^}]*default[^}]*\}/.test(code);
+                        if (!hasDefaultExport) {
+                            const warning = `${viewName}: Missing default export. The view must export a default component/class for the platform to use.`;
+                            warnings.push(warning);
+                            console.warn(`⚠️  ${warning}`);
+                        }
+                        // 3. Check if code is suspiciously small (might indicate build issue)
+                        if (code.length < 50) {
+                            const warning = `${viewName}: Bundle size is very small (${code.length} bytes). This might indicate a build issue.`;
+                            warnings.push(warning);
+                            console.warn(`⚠️  ${warning}`);
+                        }
+                        // 4. Check for missing imports that might cause runtime errors
+                        if (framework === 'lit' && !code.includes('lit')) {
+                            const warning = `${viewName}: Lit framework not detected in bundle. Make sure you're importing from 'lit'.`;
+                            warnings.push(warning);
+                            console.warn(`⚠️  ${warning}`);
+                        }
+                        dist[`${viewName}.js`] = code;
+                    }
+                    else if (chunk.type === 'asset') {
+                        dist[`${viewName}-${chunk.fileName}`] = chunk.source.toString();
+                    }
+                });
+            }
+            const totalSize = Object.values(dist).reduce((sum, code) => sum + code.length, 0);
+            const formattedSize = totalSize > 1024 ? `${(totalSize / 1024).toFixed(2)} KB` : `${totalSize} bytes`;
+            console.log(`✅ Build complete: ${Object.keys(dist).length} file${Object.keys(dist).length !== 1 ? 's' : ''} (${formattedSize})`);
+            Object.entries(dist).forEach(([name, code]) => {
+                const size = code.length > 1024 ? `${(code.length / 1024).toFixed(2)} KB` : `${code.length} bytes`;
+                console.log(`   • ${name} - ${size}`);
+            });
+            socket.send(JSON.stringify({
+                dist,
+                views: Object.keys(viewsConfig),
+                warnings: warnings.length > 0 ? warnings : undefined,
+                sdk_version: version,
+                sdk_engine: engine
+            }));
+        }
+        catch (error) {
+            console.error(`❌ Build failed: ${error.message}`);
+            socket.send(JSON.stringify({ error: error.message }));
+        }
+        finally {
+            try {
+                rmSync(tempDir, { recursive: true, force: true });
+                console.log(`Cleaned up temporary directory: ${tempDir}`);
+            }
+            catch (cleanupError) {
+                console.error(`Failed to clean up temporary directory: ${cleanupError}`);
+            }
+        }
+    }
+    async buildLegacy(nodes, version, engine, socket) {
+        try {
+            const builder = new Builder(parseInt(version), engine);
+            const dist = await builder.buildFromNodes(nodes);
+            socket.send(JSON.stringify({
+                dist,
+                sdk_version: version,
+                sdk_engine: engine
+            }));
+            console.log(`✅ Build complete (SDK ${version})`);
+        }
+        catch (error) {
+            console.error(`❌ Build failed: ${error.message}`);
+            socket.send(JSON.stringify({ error: error.message }));
+        }
+    }
     async build(options) {
         try {
             const { path } = options;