@tridion-sites/extensions-cli 0.3.2

package/dist/addon/template/extension/package.json.hbs

@@ -0,0 +1,64 @@
+{
+    "name": "{{extensionName}}",
+    "version": "1.0.0",
+    "description": "{{extensionDescription}}",
+    "author": "{{author}}",
+    "homepage": "https://www.rws.com",
+    "license": "Apache-2.0",
+    "type": "module",
+    "main": "../dist/{{extensionName}}/main.js",
+    "files": [
+        "../dist/{{extensionName}}/*"
+    ],
+    "private": true,
+    "scripts": {
+        "build": "webpack --config ./webpack.prod.config.js --progress",
+        "dev": "webpack serve --config ./webpack.dev.config.js --progress --env target={{sitesUrl}} manifest=../manifest.json config=../{{addonId}}.config.json",
+        "pack": "sites-extensions pack --manifest=../manifest.json --input=../dist --output=../",
+        "lint": "eslint . --fix && prettier --write \"src/**/*\""
+    },
+    "peerDependencies": {
+        "@tridion-sites/extensions": "{{extensionsApiVersion}}",
+        "@tridion-sites/models": "{{modelsVersion}}",
+        "@tridion-sites/open-api-client": "{{openApiClientVersion}}",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "styled-components": "5.3.6",
+        "tinymce": "6.3.1"
+    },
+    "devDependencies": {
+        "@babel/core": "7.20.12",
+        "@babel/plugin-transform-runtime": "7.19.6",
+        "@babel/preset-env": "7.20.2",
+        "@babel/preset-react": "7.18.6",
+        "@babel/preset-typescript": "7.18.6",
+        "@babel/runtime": "7.20.13",
+        "@tridion-sites/extensions-cli": "{{extensionsCliVersion}}",
+        "@types/react": "18.0.27",
+        "@types/react-dom": "18.0.10",
+        "@types/react-is": "17.0.3",
+        "@types/styled-components": "5.1.26",
+        "@typescript-eslint/eslint-plugin": "5.45.0",
+        "@typescript-eslint/parser": "5.49.0",
+        "autoprefixer": "10.4.13",
+        "babel-loader": "9.1.2",
+        "babel-plugin-styled-components": "2.0.7",
+        "css-loader": "6.7.3",
+        "cssnano": "5.1.14",
+        "eslint": "8.32.0",
+        "eslint-config-prettier": "8.6.0",
+        "eslint-formatter-pretty": "4.1.0",
+        "eslint-plugin-react": "7.32.1",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "fork-ts-checker-webpack-plugin": "7.3.0",
+        "mini-css-extract-plugin": "2.7.2",
+        "postcss": "8.4.21",
+        "postcss-loader": "7.0.2",
+        "prettier": "2.8.3",
+        "tsconfig-paths-webpack-plugin": "4.0.0",
+        "typescript": "4.9.4",
+        "webpack": "5.75.0",
+        "webpack-cli": "5.0.1",
+        "webpack-dev-server": "4.11.1"
+    }
+}

package/dist/addon/template/extension/src/globals.ts.hbs

@@ -0,0 +1,5 @@
+import { createExtensionGlobals } from '@tridion-sites/extensions';
+
+const { initialize: initializeGlobals, t, getConfiguration } = createExtensionGlobals();
+
+export { initializeGlobals, t, getConfiguration };

package/dist/addon/template/extension/src/index.tsx.hbs

@@ -0,0 +1,18 @@
+import './index.css';
+
+import type { ExtensionModule, RuntimeInformation } from '@tridion-sites/extensions';
+
+import packageJson from '../package.json';
+import { initializeGlobals } from './globals';
+
+const extensionModule: ExtensionModule = {
+    runtimeInfo: packageJson as RuntimeInformation,
+    initializeGlobals,
+    initialize: builder => {
+        /**
+         * This section is intended for initializing extensions.
+         */
+    },
+};
+
+export default extensionModule;

package/dist/addon/template/extension/tsconfig.json.hbs

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "module": "es6",
+        "target": "ES6",
+        "lib": ["es6", "dom"],
+        "jsx": "react-jsx",
+        "moduleResolution": "node",
+        "isolatedModules": true,
+        "declaration": false,
+        "sourceMap": false,
+        "forceConsistentCasingInFileNames": true,
+        "useDefineForClassFields": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "resolveJsonModule": true,
+        "noEmitOnError": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noImplicitAny": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "allowJs": false,
+        "downlevelIteration": true
+    },
+
+    "include": ["./src/**/*.ts", "./src/**/*.tsx", "./types"]
+}

package/dist/addon/template/extension/types/css.d.ts.hbs

@@ -0,0 +1,4 @@
+declare module '*.css' {
+    const styles: { [className: string]: string };
+    export default styles;
+}

package/dist/addon/template/extension/webpack.dev.config.js.hbs

@@ -0,0 +1,94 @@
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { extensionsRequestBasePath } from '@tridion-sites/extensions-cli';
+import { getDevServerConfig } from './devServer.js';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+/** @type { import('webpack').Configuration } */
+export default env => ({
+    mode: 'development',
+    entry: './src/index.tsx',
+    output: {
+        library: {
+            type: 'system',
+        },
+        path: resolve(dirname(fileURLToPath(import.meta.url)), '../dist/{{extensionName}}'),
+        publicPath: `${extensionsRequestBasePath}/{{extensionName}}/dist/{{extensionName}}`,
+        clean: true,
+    },
+    devServer: getDevServerConfig({
+        targetUrl: env.target,
+        manifestPath: env.manifest,
+        addonConfigPath: env.config,
+    }),
+    devtool: 'eval-source-map',
+    externals: [
+        'react',
+        'react-dom',
+        'styled-components',
+        'tinymce',
+        '@tridion-sites/extensions',
+        '@tridion-sites/models',
+        '@tridion-sites/open-api-client',
+    ],
+    resolve: {
+        extensions: ['.tsx', '.ts', '.jsx', '.js', '.css'],
+        plugins: [new TsconfigPathsPlugin()],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [{ loader: 'babel-loader' }],
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                    },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: {
+                                localIdentName: '[name]__[local]__[hash:base64]',
+                                exportLocalsConvention: 'camelCaseOnly',
+                            },
+                        },
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: {
+                                plugins: [
+                                    autoprefixer(),
+                                    cssnano({
+                                        safe: true,
+                                        autoprefixer: false,
+                                    }),
+                                ],
+                            },
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin({ filename: '[name].css' }),
+
+        new ForkTsCheckerWebpackPlugin({
+            typescript: {
+                diagnosticOptions: {
+                    semantic: true,
+                    syntactic: true,
+                },
+            },
+        }),
+    ],
+});

package/dist/addon/template/extension/webpack.prod.config.js.hbs

@@ -0,0 +1,85 @@
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+
+/** @type { import('webpack').Configuration } */
+export default {
+    mode: 'production',
+    entry: './src/index.tsx',
+    output: {
+        library: {
+            type: 'system',
+        },
+        path: resolve(dirname(fileURLToPath(import.meta.url)), '../dist/{{extensionName}}'),
+        clean: true,
+    },
+    externals: [
+        'react',
+        'react-dom',
+        'styled-components',
+        'tinymce',
+        '@tridion-sites/extensions',
+        '@tridion-sites/models',
+        '@tridion-sites/open-api-client',
+    ],
+    resolve: {
+        extensions: ['.tsx', '.ts', '.jsx', '.js', '.css'],
+        plugins: [new TsconfigPathsPlugin()],
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                exclude: /node_modules/,
+                use: [{ loader: 'babel-loader' }],
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                    },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: {
+                                localIdentName: '[name]__[local]__[hash:base64]',
+                                exportLocalsConvention: 'camelCaseOnly',
+                            },
+                        },
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: {
+                                plugins: [
+                                    autoprefixer(),
+                                    cssnano({
+                                        safe: true,
+                                        autoprefixer: false,
+                                    }),
+                                ],
+                            },
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin({ filename: '[name].css' }),
+
+        new ForkTsCheckerWebpackPlugin({
+            typescript: {
+                diagnosticOptions: {
+                    semantic: true,
+                    syntactic: true,
+                },
+            },
+        }),
+    ],
+};

package/dist/addonManifest-30c25a45.js

@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+import { resolve } from 'node:path';
+import { readFileSync, writeFileSync } from 'node:fs';
+
+const readJsonFile = (path) => {
+    const file = readFileSync(path, { encoding: 'utf-8' });
+    return JSON.parse(file);
+};
+const writeJsonFile = (path, value) => {
+    const json = JSON.stringify(value, null, 4);
+    writeFileSync(path, json);
+};
+
+class AddonExtension {
+    constructor(name, type) {
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.name = name;
+        this.type = type;
+    }
+}
+
+const frontendExtensionType = 'ExperienceSpaceExtension';
+class FrontendExtension extends AddonExtension {
+    constructor({ name, files, main }) {
+        super(name, frontendExtensionType);
+        Object.defineProperty(this, "main", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "files", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.main = main;
+        this.files = files;
+    }
+}
+
+class UnknownExtension extends AddonExtension {
+    constructor(name, type, extensionData) {
+        super(name, type);
+        Object.defineProperty(this, "extensionData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.extensionData = extensionData;
+    }
+}
+
+class AddonManifest {
+    constructor({ id, author, description, name, version, requireConfiguration }) {
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "author", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "description", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "manifestVersion", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "requireConfiguration", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "extensions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "addFrontendExtension", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (name, fileUrls, mainFileUrl) => {
+                this.extensions.set(name, new FrontendExtension({
+                    name,
+                    main: mainFileUrl,
+                    files: fileUrls,
+                }));
+                return this;
+            }
+        });
+        Object.defineProperty(this, "addUnknownExtension", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (name, type, extensionData) => {
+                this.extensions.set(name, new UnknownExtension(name, type, extensionData));
+                return this;
+            }
+        });
+        Object.defineProperty(this, "getFrontendExtensions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const frontendExtensions = [];
+                this.extensions.forEach(extension => {
+                    if (extension instanceof FrontendExtension) {
+                        frontendExtensions.push(extension);
+                    }
+                });
+                return frontendExtensions;
+            }
+        });
+        Object.defineProperty(this, "writeFile", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (path) => {
+                const extensionsJson = [];
+                this.extensions.forEach(extension => {
+                    if (extension instanceof FrontendExtension) {
+                        extensionsJson.push({
+                            name: extension.name,
+                            type: extension.type,
+                            properties: {
+                                main: extension.main,
+                                files: extension.files,
+                            },
+                        });
+                    }
+                    else if (extension instanceof UnknownExtension) {
+                        extensionsJson.push(extension.extensionData);
+                    }
+                });
+                const manifestPath = resolve(path, 'manifest.json');
+                writeJsonFile(manifestPath, {
+                    id: this.id,
+                    name: this.name,
+                    author: this.author,
+                    description: this.description,
+                    manifestVersion: this.manifestVersion,
+                    requireConfiguration: this.requireConfiguration,
+                    version: this.version,
+                    extensions: extensionsJson,
+                });
+            }
+        });
+        this.id = id;
+        this.author = author || '';
+        this.description = description;
+        this.name = name;
+        this.manifestVersion = '1.0.0';
+        this.requireConfiguration = requireConfiguration || 'optional';
+        this.version = version;
+        this.extensions = new Map();
+    }
+}
+Object.defineProperty(AddonManifest, "fromFile", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: (manifestPath) => {
+        const manifestFile = readJsonFile(manifestPath);
+        const manifest = new AddonManifest({
+            id: manifestFile.id,
+            author: manifestFile.author,
+            description: manifestFile.description,
+            name: manifestFile.name,
+            version: manifestFile.version,
+            requireConfiguration: manifestFile.requireConfiguration,
+        });
+        for (const extension of manifestFile.extensions) {
+            if (extension.type === frontendExtensionType) {
+                const main = extension.properties.main;
+                const files = extension.properties.files;
+                manifest.addFrontendExtension(extension.name, files, main);
+            }
+            else {
+                manifest.addUnknownExtension(extension.name, extension.type, extension);
+            }
+        }
+        return manifest;
+    }
+});
+
+export { AddonManifest as A, readJsonFile as r, writeJsonFile as w };