@embeddable.com/sdk-core 0.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embeddable.com/sdk-core",
-  "version": "0.2.0",
+  "version": "2.0.0",
   "description": "Core Embeddable SDK module responsible for web-components bundling and publishing.",
   "keywords": [
     "embeddable",
@@ -21,8 +21,8 @@
   },
   "author": "Oleg Kapustin <oleg@trevor.io>",
   "files": [
+    "dist/",
     "lib/",
-    "scripts/",
     "templates/",
     "configs/"
   ],
@@ -31,11 +31,20 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@embeddable.com/sdk-utils": "*",
     "@stencil/core": "^4.0.0",
     "archiver": "^5.3.1",
     "axios": "^1.4.0",
     "formdata-node": "^5.0.1",
-    "prompt": "^1.3.0",
-    "ora": "^6.3.1"
+    "open": "^9.1.0",
+    "yaml": "^2.3.3"
+  },
+  "lint-staged": {
+    "*.{js,ts,json}": [
+      "prettier --write"
+    ]
+  },
+  "devDependencies": {
+    "@types/archiver": "^5.3.4"
   }
 }

package/templates/component.tsx.template

@@ -22,6 +22,10 @@ export class EmbeddableComponent {
     this.handlePops();
   }
 
+  disconnectedCallback() {
+    this.rootElement.dispatchEvent(new CustomEvent('EMBEDDABLE_COMPONENT:UNMOUNT'));
+  }
+
   componentWillUpdate() {
     const event = new CustomEvent('embeddable-event:update-props', {
       bubbles: false,

package/scripts/build.js

@@ -1,20 +0,0 @@
-const path = require("path");
-const { prepare } = require("./prepare");
-const { generate } = require("./generate");
-const { cleanup } = require("./cleanup");
-const { createContext } = require("./createContext");
-
-async function build(pluginOptions = {}) {
-    const ctx = {
-        ...createContext(path.resolve(__dirname, '..'), process.cwd()),
-        pluginOptions
-    };
-
-    await prepare(ctx);
-
-    await generate(ctx);
-
-    await cleanup(ctx);
-}
-
-module.exports = { build };

package/scripts/buildTypes.js

@@ -1,54 +0,0 @@
-const fs = require("node:fs/promises");
-const path = require("node:path");
-const vite = require("vite");
-
-const { findEmbFiles } = require("./findEmbFiles");
-
-
-const EMB_TYPE_FILE_REGEX = /^(.*)\.type\.emb\.[jt]s$/;
-const EMB_OPTIONS_FILE_REGEX = /^(.*)\.options\.emb\.[jt]s$/;
-
-async function buildTypes(ctx) {
-    await generate(ctx);
-
-    await build(ctx);
-
-    await cleanup(ctx);
-}
-
-module.exports = { buildTypes };
-
-
-async function generate(ctx) {
-    const typeFiles = await findEmbFiles(ctx.client.srcDir, EMB_TYPE_FILE_REGEX);
-    const optionsFiles = await findEmbFiles(ctx.client.srcDir, EMB_OPTIONS_FILE_REGEX);
-
-    const typeImports = typeFiles.concat(optionsFiles).map(([fileName, filePath]) =>
-        `import './${path.relative(ctx.client.rootDir, filePath)}';`
-    ).join('\n');
-
-    await fs.writeFile(
-        path.resolve(ctx.client.rootDir, ctx.outputOptions.typesEntryPointFilename),
-        typeImports
-    );
-}
-
-async function build(ctx) {
-    process.chdir(ctx.client.rootDir);
-
-    await vite.build({
-        build: {
-            emptyOutDir: false,
-            lib: {
-                entry: `./${ctx.outputOptions.typesEntryPointFilename}`,
-                formats: ['es'],
-                fileName: 'embeddable-types'
-            },
-            outDir: '.embeddable-build/'
-        },
-    });
-}
-
-async function cleanup(ctx) {
-    await fs.rm(path.resolve(ctx.client.rootDir, 'embeddable-types-entry-point.js'));
-}

package/scripts/cleanup.js

@@ -1,30 +0,0 @@
-const fs = require('fs/promises');
-const path = require("path");
-
-async function cleanup (ctx) {
-    await extractBuild(ctx);
-
-    await removeObsoleteDir(ctx.client.buildDir);
-
-    await moveBuildTOBuildDir(ctx);
-}
-
-module.exports = { cleanup };
-
-
-async function extractBuild(ctx) {
-    await fs.rename(
-        path.resolve(ctx.client.buildDir, ctx.client.stencilBuild),
-        ctx.client.tmpDir
-    );
-}
-
-
-async function removeObsoleteDir(dir) {
-    await fs.rm(dir, { recursive: true });
-}
-
-
-async function moveBuildTOBuildDir(ctx) {
-    await fs.rename(ctx.client.tmpDir, ctx.client.buildDir);
-}

package/scripts/createContext.js

@@ -1,22 +0,0 @@
-const path = require('path');
-
-function createContext (coreRoot, clientRoot) {
-    return {
-        core: {
-            rootDir: coreRoot,
-            templatesDir: path.resolve(coreRoot, 'templates'),
-            configsDir: path.resolve(coreRoot, 'configs')
-        },
-        client: {
-            rootDir: clientRoot,
-            buildDir: path.resolve(clientRoot, '.embeddable-build'),
-            srcDir: path.resolve(clientRoot, 'src'),
-            tmpDir: path.resolve(clientRoot, '.embeddable-tmp'),
-            componentDir: path.resolve(clientRoot, '.embeddable-build', 'component'),
-            stencilBuild: path.resolve(clientRoot, '.embeddable-build', 'dist', 'embeddable-wrapper'),
-            archiveFile: path.resolve(clientRoot, "embeddable-build.zip")
-        }
-    }
-}
-
-module.exports = { createContext };

package/scripts/findEmbFiles.js

@@ -1,33 +0,0 @@
-const fs = require("fs/promises");
-const path = require("path");
-
-async function findEmbFiles (initialSrcDir, regex) {
-    const filesList = [];
-
-    async function findEmbFilesRec(srcDir) {
-        const allFiles = await fs.readdir(srcDir);
-
-        for (const file of allFiles) {
-            const filePath = path.join(srcDir, file)
-
-            const status = await fs.lstat(filePath);
-
-            if (status.isDirectory()) {
-                await findEmbFilesRec(filePath)
-            }
-
-            const fileName = file.match(regex);
-
-            if (fileName) {
-                filesList.push([fileName[1], filePath]);
-            }
-        }
-    }
-
-    await findEmbFilesRec(initialSrcDir);
-
-
-    return filesList;
-}
-
-module.exports = { findEmbFiles };

package/scripts/generate.js

@@ -1,67 +0,0 @@
-const fs = require("fs/promises");
-const path = require("path");
-
-const stencilNodeApi = require("@stencil/core/sys/node");
-const stencil = require("@stencil/core/cli");
-
-const STYLE_IMPORTS_TOKEN = '{{STYLES_IMPORT}}';
-const RENDER_IMPORT_TOKEN = '{{RENDER_IMPORT}}';
-
-const NODE_LOGGER = stencilNodeApi.createNodeLogger({ process: process });
-const NODE_SYS = stencilNodeApi.createNodeSys({ process: process, logger: NODE_LOGGER });
-
-async function generate(ctx) {
-    await injectCSS(ctx);
-
-    await injectBundleRender(ctx);
-
-    await runStencil(ctx);
-}
-
-module.exports = { generate };
-
-async function injectCSS (ctx) {
-    const CUSTOMER_BUILD = path.resolve(ctx.client.buildDir, ctx.pluginOptions.outDir);
-    const allFiles = await fs.readdir(CUSTOMER_BUILD);
-
-    const cssFilesImportsStr = allFiles
-        .filter(fileName => fileName.endsWith('.css'))
-        .map(fileName => `@import '../${ctx.pluginOptions.outDir}/${fileName}';`).join('\n');
-
-    const content = await fs.readFile(
-        path.resolve(ctx.core.templatesDir, 'style.css.template'),
-        'utf8'
-    );
-
-    await fs.writeFile(
-        path.resolve(ctx.client.componentDir, 'style.css'),
-        content.replace(STYLE_IMPORTS_TOKEN, cssFilesImportsStr)
-    );
-}
-
-
-async function injectBundleRender(ctx) {
-    const importStr = `import render from '../${ctx.pluginOptions.outDir}/${ctx.pluginOptions.renderFunctionFileName}';`;
-
-    const content = await fs.readFile(
-        path.resolve(ctx.core.templatesDir, 'component.tsx.template'),
-        'utf8'
-    );
-
-    await fs.writeFile(
-        path.resolve(ctx.client.componentDir, 'component.tsx'),
-        content.replace(RENDER_IMPORT_TOKEN, importStr)
-    );
-}
-
-
-async function runStencil(ctx) {
-    process.chdir(ctx.client.buildDir);
-
-    await stencil.run({
-        args: ['build'],
-        logger: NODE_LOGGER,
-        sys: NODE_SYS,
-        checkVersion: stencilNodeApi.checkVersion,
-    });
-}

package/scripts/index.js

@@ -1,13 +0,0 @@
-const { build } = require("./build");
-const { buildTypes } = require("./buildTypes");
-const { findEmbFiles } = require("./findEmbFiles");
-const { login } = require("./login");
-const { push } = require("./push");
-
-module.exports = {
-    build,
-    buildTypes,
-    findEmbFiles,
-    login,
-    push
-}

package/scripts/login.js

@@ -1,76 +0,0 @@
-const path = require("path");
-const os = require("os");
-const fs = require("fs/promises");
-const prompt = require('prompt');
-const axios = require('axios');
-
-const CREDENTIALS_DIR = path.resolve(os.homedir(), '.embeddable');
-const CREDENTIALS_FILE = path.resolve(CREDENTIALS_DIR, 'credentials');
-
-const PROMPT_SCHEMA = {
-    properties: {
-        username: {
-            description: 'embeddable user name',
-            type: 'string',
-            required: true
-        },
-        password: {
-            description: 'embeddable user password',
-            type: 'string',
-            hidden: true,
-            replace: '*',
-            required: true
-        }
-    }
-};
-
-async function login () {
-    await resolveFiles();
-
-    prompt.start();
-
-    const { username, password } = await prompt.get(PROMPT_SCHEMA);
-
-    const authResponse = await axios.post(
-        'https://metadata.embeddable.com/auth/token', // TODO: hardcoded for now.
-        { username, password }
-    );
-
-    const token = authResponse.data;
-
-    if (!token) {
-        prompt.stop();
-        console.log('Invalid credentials');
-        process.exit();
-    }
-
-    await fs.writeFile(CREDENTIALS_FILE, JSON.stringify({ token }));
-}
-
-async function getToken() {
-    try {
-        const rawCredentials = await fs.readFile(CREDENTIALS_FILE, 'utf-8');
-        const credentials = JSON.parse(rawCredentials.toString());
-
-        return credentials?.token ?? '';
-    }  catch (_e) {
-        return '';
-    }
-}
-
-module.exports = { login, getToken };
-
-
-async function resolveFiles () {
-    try {
-        await fs.access(CREDENTIALS_DIR);
-    } catch (_e) {
-        await fs.mkdir(CREDENTIALS_DIR);
-    }
-
-    try {
-        await fs.access(CREDENTIALS_FILE);
-    } catch (e) {
-        await fs.writeFile(CREDENTIALS_FILE, '');
-    }
-}

package/scripts/prepare.js

@@ -1,26 +0,0 @@
-const fsSync = require('fs');
-const fs = require('fs/promises');
-
-async function prepare (ctx) {
-    await removeIfExists(ctx);
-
-    await copyStencilConfigsToClient(ctx);
-
-    await createComponentDir(ctx.client.componentDir);
-}
-
-module.exports = { prepare }
-
-async function removeIfExists(ctx) {
-    if (ctx.pluginOptions) return;
-
-    if (fsSync.existsSync(ctx.client.buildDir)) await fs.rm(ctx.client.buildDir, { recursive: true });
-}
-
-async function copyStencilConfigsToClient(ctx) {
-    await fs.cp(ctx.core.configsDir, ctx.client.buildDir, { recursive: true });
-}
-
-async function createComponentDir(dir) {
-    await fs.mkdir(dir);
-}

package/scripts/push.js

@@ -1,97 +0,0 @@
-const fs= require("fs/promises");
-const fsSync= require("fs");
-const path = require("path");
-const archiver = require('archiver');
-const axios = require('axios');
-const oraP = import('ora');
-
-const { findEmbFiles } = require('./findEmbFiles');
-const { createContext } = require("./createContext");
-const { getToken } = require('./login');
-
-const EMB_YAML_FILE_REGEX = /^(.*)\.emb\.ya?ml$/;
-
-async function push () {
-    const ora = (await oraP).default;
-
-    const ctx = createContext(path.resolve(__dirname, '..'), process.cwd());
-
-    const token = await verify(ctx);
-
-    const spinnerArchive = ora("archivation...").start();
-
-    const filesList = await findEmbFiles(ctx.client.srcDir, EMB_YAML_FILE_REGEX);
-
-    await archive(ctx, filesList);
-    spinnerArchive.succeed("archivation competed");
-
-    const spinnerPushing = ora("publishing...").start();
-    await sendBuild(ctx, token);
-    spinnerPushing.succeed("published!");
-}
-
-module.exports = { push }
-
-async function verify(ctx) {
-    try {
-        await fs.access(ctx.client.buildDir);
-    } catch (_e) {
-        console.error('No embeddable build was produced.');
-        process.exit(1);
-    }
-
-    // TODO: initiate login if no/invalid token.
-    const token = await getToken();
-
-    if (!token) {
-        console.error('Expired token. Please login again.');
-        process.exit(1);
-    }
-
-    return token;
-}
-
-function archive(ctx, yamlFiles) {
-    const output = fsSync.createWriteStream(ctx.client.archiveFile);
-    const _archiver = archiver('zip', {
-        zlib: { level: 9 }
-    });
-
-    _archiver.pipe(output);
-    _archiver.directory(ctx.client.buildDir, false);
-
-    for (const fileData of yamlFiles) {
-        _archiver.file(fileData[1], { name: `${fileData[0]}.emb.yaml` })
-    }
-
-    _archiver.finalize();
-
-    return new Promise((resolve, _reject) => {
-        output.on('close', resolve);
-    })
-}
-
-async function sendBuild(ctx, token) {
-    const {FormData} = await import("formdata-node");
-    const {fileFromPath} = await import("formdata-node/file-from-path");
-
-    const file = await fileFromPath(ctx.client.archiveFile, "embeddable-build.zip");
-
-    const form = new FormData();
-    form.set('file', file, 'embeddable-build.zip');
-
-    await axios.post(
-        'https://metadata.embeddable.com/sdk/upload-files',
-        form,
-        {
-            headers: {
-                "Content-Type": "multipart/form-data",
-                "Authorization" : `Bearer ${token}`
-            },
-            maxContentLength: Infinity,
-            maxBodyLength: Infinity
-        }
-    );
-
-    await fs.rm(ctx.client.archiveFile);
-}