@movable/rollup-plugin-manifest-merger 3.0.0-canvases.0 → 3.0.0

package/.eslintrc.js

@@ -1,12 +1,11 @@
+/* eslint-env node */
 module.exports = {
-  extends: ['airbnb-base', 'plugin:prettier/recommended'],
-  plugins: [],
+  extends: ['@movable/eslint-config-typescript'],
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
   },
   env: {
-    browser: false,
     node: true
   }
 };

package/build/src/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputFile = exports.manifestMerger = exports.packageBuilder = void 0;
+const studio_index_builder_1 = require("./plugins/studio-index-builder");
+Object.defineProperty(exports, "packageBuilder", { enumerable: true, get: function () { return studio_index_builder_1.packageBuilder; } });
+const manifest_merger_1 = __importDefault(require("./plugins/manifest-merger"));
+exports.manifestMerger = manifest_merger_1.default;
+const inputFile = studio_index_builder_1.INPUT_FILE;
+exports.inputFile = inputFile;

package/build/src/plugins/manifest-merger.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const pluginutils_1 = require("@rollup/pluginutils");
+const yamljs_1 = __importDefault(require("yamljs"));
+const resolve_1 = __importDefault(require("resolve"));
+const pkg_dir_1 = __importDefault(require("pkg-dir"));
+const fs_1 = require("fs");
+const APP_FILTER = pluginutils_1.createFilter(/app-manifest\.yml$/);
+const PACKAGE_FILTER = pluginutils_1.createFilter(/\.yml$/);
+function manifestMerger(opts) {
+    const fileName = opts.output;
+    const outputJSON = !!opts.outputJSON;
+    const shouldUpdateFrameworkVersion = !opts.ignoreFrameworkVersionUpdate;
+    let appManifest;
+    const studioFrameworkPath = resolve_1.default.sync('@movable/studio-framework', { basedir: process.cwd() });
+    const frameworkPkgPath = `${pkg_dir_1.default.sync(studioFrameworkPath)}/package.json`;
+    const studioFrameworkPkg = require(frameworkPkgPath);
+    const pathPackageMap = new Map();
+    const packageDependencies = [
+        { name: '@movable/studio-framework', version: studioFrameworkPkg.version }
+    ];
+    const packageCache = new Map();
+    return {
+        name: 'Studio Manifest Merger Rollup Plugin',
+        buildStart() {
+            if (opts.appManifest) {
+                this.addWatchFile(opts.appManifest);
+                appManifest = yamljs_1.default.parse(fs_1.readFileSync(opts.appManifest).toString('utf-8'));
+            }
+        },
+        buildEnd() {
+            if (!appManifest) {
+                throw new Error('There was no app-manifest.yml imported. You may provide a "appManifest" to the "manifestBundler()" options');
+            }
+        },
+        resolveId(id) {
+            if (!APP_FILTER(id) && PACKAGE_FILTER(id)) {
+                const path = resolve_1.default.sync(id, { basedir: process.cwd() });
+                const importRoot = pkg_dir_1.default.sync(path);
+                const pkg = require(`${importRoot}/package.json`);
+                pathPackageMap.set(path, pkg.name);
+                this.addWatchFile(path);
+                return path;
+            }
+        },
+        transform(yml, id) {
+            const noCode = {
+                code: '',
+                map: { mappings: '' }
+            };
+            if (APP_FILTER(id)) {
+                appManifest = yamljs_1.default.parse(yml);
+                return noCode;
+            }
+            if (PACKAGE_FILTER(id)) {
+                const packageManifest = yamljs_1.default.parse(yml);
+                const name = pathPackageMap.get(id);
+                if (name) {
+                    packageManifest.name = name;
+                }
+                else {
+                    throw new Error(`Could not determine the package name for file: ${id}. Make sure that "nodeResolve()" is placed after "manifestMerger()"`);
+                }
+                packageCache.set(id, packageManifest);
+                return noCode;
+            }
+            return null;
+        },
+        generateBundle() {
+            // Make sure the studio_options key is present
+            if (!appManifest.studio_options)
+                appManifest.studio_options = {};
+            if (shouldUpdateFrameworkVersion) {
+                // Add the framework version to studio_options
+                appManifest.studio_options.framework_version = studioFrameworkPkg.version;
+                appManifest.studio_options.package_dependencies = packageDependencies;
+            }
+            // Add the package manifests to the array
+            const manifests = [];
+            const integrationIds = [...(appManifest.integration_ids || [])];
+            for (const [, val] of packageCache.entries()) {
+                if (Array.isArray(val.integration_ids)) {
+                    integrationIds.push(...val.integration_ids);
+                }
+                manifests.push(val);
+            }
+            appManifest.package_manifests = manifests;
+            if (integrationIds.length) {
+                appManifest.integration_ids = [...new Set(integrationIds)];
+            }
+            if (fileName) {
+                const inline = 12; // The level where you switch to inline YAML
+                const indent = 2; // The amount of spaces to use for indentation of nested nodes.
+                const source = outputJSON
+                    ? JSON.stringify(appManifest)
+                    : yamljs_1.default.stringify(appManifest, inline, indent);
+                // eslint-disable-next-line no-param-reassign
+                this.emitFile({
+                    type: 'asset',
+                    fileName,
+                    source
+                });
+            }
+        }
+    };
+}
+exports.default = manifestMerger;

package/build/src/plugins/studio-index-builder.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.packageBuilder = exports.INPUT_FILE = void 0;
+const uuid_1 = require("uuid");
+const index_js_builder_1 = __importDefault(require("../utils/index-js-builder"));
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+exports.INPUT_FILE = `${uuid_1.v4()}.js`;
+function packageBuilder(opts) {
+    const pkg = JSON.parse(fs_1.readFileSync('./package.json').toString('utf-8'));
+    const indexHtmlSource = fs_1.readFileSync(path_1.default.join(__dirname, '../utils/default-package-index.html')).toString('utf-8');
+    return {
+        name: 'Studio Package Builder Rollup Plugin',
+        resolveId(id) {
+            if (id === exports.INPUT_FILE) {
+                return id;
+            }
+            return null;
+        },
+        async load(id) {
+            if (id === exports.INPUT_FILE) {
+                return index_js_builder_1.default(pkg, opts.entry);
+            }
+            return null;
+        },
+        generateBundle() {
+            this.emitFile({
+                type: 'asset',
+                fileName: 'index.html',
+                source: indexHtmlSource
+            });
+        }
+    };
+}
+exports.packageBuilder = packageBuilder;

package/build/src/types/packages.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/src/utils/default-package-index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="movable-cli-version" value="1.0.0">
+    <meta name="studio-bundled" value="true">
+    <meta name="cp-version" value="0">
+    <!-- DO NOT MODIFY -->
+  </head>
+
+  <body>
+
+    <div id="react-root"></div>
+
+    <!-- MI WYSIWYG: DO NOT MODIFY CODE BEYOND THIS POINT. This code is auto-generated by Studio and will be overwritten -->
+
+    <div style="display: none;" class="mi-attributes">[]</div>
+    <!-- END MI WYSIWYG -->
+
+    <script>
+      // Your code should set window.APP_SUCCESSFULLY_RENDERED to true once it
+      // has completed successfully.
+      window.APP_SUCCESSFULLY_RENDERED = false;
+
+      window.addEventListener('capture-ready', function () {
+        if (!window.APP_SUCCESSFULLY_RENDERED) {
+          MICapture.error('Did not capture as app did not indicate that it was ready for capture. (Checking window.APP_SUCCESSFULLY_RENDERED)');
+        }
+      });
+    </script>
+
+    <script src="./dist/index.js"></script>
+  </body>
+</html>

package/build/src/utils/index-js-builder.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const recast_1 = require("recast");
+const { builders: b } = recast_1.types;
+const BASE = `
+  import StudioFramework from '@movable/studio-framework';
+
+  export default class App extends StudioFramework {
+    setup() {}
+  }
+
+  const app = new App();
+
+  app.render(document.getElementById('react-root')).then(() => {
+    window.APP_SUCCESSFULLY_RENDERED = true;
+  });
+`;
+function defaultPackageName(packageName) {
+    return `_${packageName.replace(/[^A-Za-z0-9]/g, '_')}`;
+}
+/**
+ * Generates an Import statement
+ *
+ * ex: `import _my_package from "my-package";
+ *
+ * @param packageName {string} the unique name of the package
+ * @param variableName {string} the variable name of the default package import
+ */
+function makePackageImport(packageName, variableName) {
+    const importFrom = b.literal(packageName);
+    const defaultImportSpecifier = b.importDefaultSpecifier(b.identifier(variableName));
+    return b.importDeclaration([defaultImportSpecifier], importFrom);
+}
+/**
+ * Generates a plain import statement.
+ *
+ * ex: `import "my-package/manifest.yml";`
+ *
+ * @param packageName {string} the name of the file to be imported
+ */
+function makePlainPackageImport(importName) {
+    const importFrom = b.literal(importName);
+    return b.importDeclaration([], importFrom);
+}
+/**
+ * Creates an expression that looks up the `setGrouping` method:
+ *
+ * ex: `this.setGrouping`
+ */
+function setGroupingMember() {
+    const thisExpression = b.thisExpression();
+    const setGrouping = b.identifier('setGrouping');
+    return b.memberExpression(thisExpression, setGrouping);
+}
+/**
+ * Creates an initialization function with the given function name
+ *
+ * ex: `packageInitFuncName(this)`
+ *
+ * @param packageInitializationFunctionName {string} the package initialization function
+ */
+function makeStandardInitalizeStatement(packageInitializationFunctionName) {
+    const packageInitializationFunctionID = b.identifier(packageInitializationFunctionName);
+    const packageInitialization = b.callExpression(packageInitializationFunctionID, [
+        b.thisExpression()
+    ]);
+    return b.expressionStatement(packageInitialization);
+}
+/**
+ * Creates a statement to call `setGrouping` with the package name and initialization function:
+ *
+ * ex: `this.setGrouping("my-package", () => { initilizationFn(this); })`
+ *
+ * @param packageName {string} the unique name of the package
+ * @param packageInitializationFunctionName {string} the package initialization function
+ */
+function makeSetGroupingStatement(packageName, packageInitializationFunctionName) {
+    const packageNameArg = b.literal(packageName);
+    const initStatement = makeStandardInitalizeStatement(packageInitializationFunctionName);
+    const anonymousFn = b.arrowFunctionExpression([], b.blockStatement([initStatement]));
+    const memberExpression = setGroupingMember();
+    const callExpression = b.callExpression(memberExpression, [packageNameArg, anonymousFn]);
+    return b.expressionStatement(callExpression);
+}
+function makeRelativeImport(path) {
+    return path.startsWith('./') ? path : `./${path}`;
+}
+function generateImports(pkg, entryPath) {
+    const { name, ['studio-package']: studioPackage } = pkg;
+    const setups = [];
+    const imports = [];
+    const variableName = defaultPackageName(name);
+    const relativeEntry = makeRelativeImport(entryPath);
+    imports.push(makePackageImport(relativeEntry.replace(/\.js$/, ''), variableName));
+    if (studioPackage && studioPackage.manifest) {
+        const relativeManifest = makeRelativeImport(studioPackage.manifest);
+        imports.push(makePlainPackageImport(relativeManifest));
+    }
+    setups.push(makeSetGroupingStatement(name, variableName));
+    return [imports, setups];
+}
+function generateApp(pkg, entryPath) {
+    const app = recast_1.parse(BASE);
+    const [imports, setups] = generateImports(pkg, entryPath);
+    const BODY = app.program.body;
+    // Add imports after the StudioFrameworkImport
+    BODY.splice(1, 0, ...imports);
+    // Insert the "setups" into the setup method:
+    recast_1.visit(app, {
+        visitBlockStatement(path) {
+            const parentValue = path.parent.parent.value;
+            if (parentValue.type === 'MethodDefinition' && parentValue.key.name === 'setup') {
+                path.value.body.push(...setups);
+                return false;
+            }
+            this.traverse(path);
+        }
+    });
+    return recast_1.prettyPrint(app, { tabWidth: 2 }).code;
+}
+exports.default = generateApp;

package/build/test/helpers/expect-ast-equals.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const chai_1 = require("chai");
+const recast_1 = require("recast");
+function printAst(ast) {
+    return recast_1.prettyPrint(ast, { tabWidth: 2 }).code;
+}
+function expectAstEqual(compareFrom, compareTo) {
+    const astA = recast_1.parse(compareFrom);
+    const astB = recast_1.parse(compareTo);
+    chai_1.expect(printAst(astA)).to.eq(printAst(astB));
+}
+exports.default = expectAstEqual;

package/build/test/helpers/setup-fixture.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const mocha_1 = require("mocha");
+const path_1 = __importDefault(require("path"));
+function setupFixture(fixtureName) {
+    const previousCWD = process.cwd();
+    mocha_1.beforeEach(() => {
+        const fixturePath = path_1.default.join(__dirname, '../fixtures', fixtureName);
+        process.chdir(fixturePath);
+    });
+    mocha_1.afterEach(() => {
+        process.chdir(previousCWD);
+    });
+}
+exports.default = setupFixture;

package/build/test/index-test.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const mocha_1 = require("mocha");
+const chai_1 = require("chai");
+const rollup_1 = require("rollup");
+const plugin_node_resolve_1 = __importDefault(require("@rollup/plugin-node-resolve"));
+const yamljs_1 = __importDefault(require("yamljs"));
+const index_1 = require("../src/index");
+const setup_fixture_1 = __importDefault(require("./helpers/setup-fixture"));
+mocha_1.describe('test', () => {
+    setup_fixture_1.default('test-package');
+    mocha_1.it('can bundle based on an index', async () => {
+        const bundle = await rollup_1.rollup({
+            input: index_1.inputFile,
+            plugins: [
+                index_1.packageBuilder({ entry: 'src/index.js' }),
+                index_1.manifestMerger({ output: 'manifest.yml', appManifest: 'test-app-manifest.yml' }),
+                plugin_node_resolve_1.default()
+            ]
+        });
+        const { output } = await bundle.generate({
+            format: 'es'
+        });
+        const javascript = output.find(({ fileName }) => fileName === index_1.inputFile);
+        const yaml = output.find(({ fileName }) => fileName === 'manifest.yml');
+        const html = output.find(({ fileName }) => fileName === 'index.html');
+        // @ts-ignore
+        chai_1.expect(javascript.code).to.contain('test-package');
+        // @ts-ignore
+        chai_1.expect(javascript.code).to.contain('src/random-file');
+        // @ts-ignore
+        chai_1.expect(javascript.code).to.contain('@movable/studio-framework');
+        // @ts-ignore
+        chai_1.expect(html.source).to.contain(`<div style="display: none;" class="mi-attributes">[]</div>`);
+        // @ts-ignore
+        const manifest = yamljs_1.default.parse(yaml.source);
+        chai_1.expect(manifest).to.deep.eq({
+            name: 'Test App Manifest',
+            authors: ['Foo'],
+            height: 400,
+            width: 600,
+            package_manifests: [
+                {
+                    authors: ['Test Developer'],
+                    name: 'test-package'
+                }
+            ],
+            studio_options: {
+                framework_version: '2.34.0',
+                package_dependencies: [{ name: '@movable/studio-framework', version: '2.34.0' }]
+            }
+        });
+    });
+});

package/build/test/plugins/manifest-merger-test.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const mocha_1 = require("mocha");
+const chai_1 = require("chai");
+const rollup_1 = require("rollup");
+const plugin_node_resolve_1 = __importDefault(require("@rollup/plugin-node-resolve"));
+const yamljs_1 = __importDefault(require("yamljs"));
+const index_1 = require("../../src/index");
+const setup_fixture_1 = __importDefault(require("../helpers/setup-fixture"));
+const studioFrameworkPkg = require('@movable/studio-framework/package.json');
+const expectedAppManifest = {
+    name: 'App Manifest',
+    options: [{ name: 'Option 2' }, { framework_version: '1.10.0' }],
+    string_array: ['one', 'two', 'three'],
+    package_manifests: [
+        {
+            name: '@movable-internal/test-dep',
+            authors: ['Test Developer']
+        }
+    ],
+    studio_options: {
+        framework_version: studioFrameworkPkg.version,
+        package_dependencies: [
+            { name: '@movable/studio-framework', version: studioFrameworkPkg.version }
+        ]
+    }
+};
+const bundledManifest = async ({ outputJSON = true, ignoreFrameworkVersionUpdate = false } = {}) => {
+    const outputFile = outputJSON ? 'manifest.json' : 'manifest.yml';
+    const bundle = await rollup_1.rollup({
+        input: 'index.js',
+        plugins: [
+            index_1.manifestMerger({
+                outputJSON,
+                output: outputFile,
+                ignoreFrameworkVersionUpdate
+            }),
+            plugin_node_resolve_1.default()
+        ]
+    });
+    const { output } = await bundle.generate({
+        format: 'es'
+    });
+    const file = output.find(({ fileName }) => fileName === outputFile);
+    // @ts-ignore
+    return outputJSON ? JSON.parse(file.source) : yamljs_1.default.parse(file.source);
+};
+mocha_1.describe('manifestMerger - app test', async () => {
+    setup_fixture_1.default('test-app-no-integration-ids');
+    mocha_1.it('can build the manifest via dependencies with yml output', async () => {
+        const manifest = await bundledManifest({ outputJSON: false });
+        chai_1.expect(manifest).to.deep.equal(expectedAppManifest);
+    });
+    mocha_1.it('can optionally ignore the actual Studio Framework version', async () => {
+        const manifest = await bundledManifest({
+            outputJSON: false,
+            ignoreFrameworkVersionUpdate: true
+        });
+        chai_1.expect(manifest).to.deep.equal({
+            ...expectedAppManifest,
+            studio_options: { framework_version: '2.15' }
+        });
+        mocha_1.it('can build the manifest via dependencies with json output', async () => {
+            const manifest = await bundledManifest();
+            chai_1.expect(manifest).to.deep.equal(expectedAppManifest);
+        });
+    });
+    mocha_1.it('can build the manifest via dependencies', async () => {
+        const manifest = await bundledManifest();
+        chai_1.expect(manifest).to.deep.equal(expectedAppManifest);
+    });
+});
+mocha_1.describe('manifest merger - integration ids', () => {
+    mocha_1.describe('app with existing ids / dependencies with ids', () => {
+        setup_fixture_1.default('test-app-with-app-and-package-integration-ids');
+        mocha_1.it('it can build multiple integration ids from multiple packages', async () => {
+            const manifest = await bundledManifest();
+            chai_1.expect(manifest.integration_ids).to.have.members(['app-123', '123', 'abc', 'foo', 'bar']);
+        });
+        mocha_1.it('it does not duplicate appManifest.integration_ids upon regeneration', async () => {
+            await bundledManifest();
+            const manifest = await bundledManifest();
+            chai_1.expect(manifest.integration_ids).to.have.members(['app-123', '123', 'abc', 'foo', 'bar']);
+        });
+    });
+    mocha_1.describe('app with existing ids / dependencies with no ids', () => {
+        setup_fixture_1.default('test-app-with-app-integration-ids');
+        mocha_1.it('it can build integration ids with no package integration ids', async () => {
+            const manifest = await bundledManifest();
+            chai_1.expect(manifest.integration_ids).to.have.members(['app-123']);
+        });
+    });
+});

package/build/test/utils/index-js-builder-test.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const mocha_1 = require("mocha");
+const index_js_builder_1 = __importDefault(require("../../src/utils/index-js-builder"));
+const expect_ast_equals_1 = __importDefault(require("../helpers/expect-ast-equals"));
+mocha_1.describe('app template builder', () => {
+    mocha_1.it('imports package when `studio-package` present', () => {
+        const app = index_js_builder_1.default({
+            name: 'my-package',
+            version: '1.3.4',
+            main: 'src/index.js'
+        }, 'src/index.js');
+        expect_ast_equals_1.default(app, `
+        import StudioFramework from '@movable/studio-framework';
+        import _my_package from './src/index';
+
+        export default class App extends StudioFramework {
+          setup() {
+            this.setGrouping('my-package', () => {
+              _my_package(this)
+            });
+          }
+        }
+
+        const app = new App();
+
+        app.render(document.getElementById('react-root')).then(() => {
+          window.APP_SUCCESSFULLY_RENDERED = true;
+        });
+      `);
+    });
+    mocha_1.it('imports manifest when manifest key in `studio-package` present', () => {
+        const app = index_js_builder_1.default({
+            name: 'my-package',
+            version: '1.3.4',
+            main: 'src/index.js',
+            'studio-package': {
+                manifest: 'package-manifest.yml'
+            }
+        }, 'src/index.js');
+        expect_ast_equals_1.default(app, `
+        import StudioFramework from '@movable/studio-framework';
+        import _my_package from './src/index';
+        import './package-manifest.yml';
+
+        export default class App extends StudioFramework {
+          setup() {
+            this.setGrouping('my-package', () => {
+              _my_package(this)
+            });
+          }
+        }
+
+        const app = new App();
+
+        app.render(document.getElementById('react-root')).then(() => {
+          window.APP_SUCCESSFULLY_RENDERED = true;
+        });
+      `);
+    });
+});