@creopse/bridge 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Noé Gnanih
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Creopse Bridge

package/dist/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DASHBOARD_MODULE_NAME = "PluginDashboard";
+export declare const SETTINGS_MODULE_NAME = "PluginSettings";

package/dist/utils/constants.js

@@ -0,0 +1,3 @@
+// Modules
+export const DASHBOARD_MODULE_NAME = 'PluginDashboard';
+export const SETTINGS_MODULE_NAME = 'PluginSettings';

package/dist/utils/functions.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Returns the base URL of the current window location.
+ *
+ * @return {string} The base URL of the current window location.
+ */
+export declare const getBaseUrl: () => string;
+/**
+ * Returns the URL of the current page by appending the base URL with the pathname.
+ *
+ * @return {string} The URL of the current page.
+ */
+export declare const getPageUrl: () => string;
+/**
+ * Removes the trailing slash from a given path.
+ *
+ * @param {string} path - The path to remove the trailing slash from.
+ * @return {string} The path without the trailing slash.
+ */
+export declare const removeTrailingSlash: (path: string) => string;
+/**
+ * Determines if a given string is a valid JSON string representing an object.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} Returns true if the string is a valid JSON string of an object, false otherwise.
+ */
+export declare const isStringifiedObject: (str: string) => boolean;
+/**
+ * Sanitizes an ID by removing any characters that are not a letter, number, slash, or dash and replacing any slashes with dashes.
+ *
+ * @param {string} id - The ID to be sanitized.
+ * @return {string} The sanitized ID.
+ */
+export declare const sanitizeId: (id: string) => string;

package/dist/utils/functions.js

@@ -0,0 +1,53 @@
+/**
+ * Returns the base URL of the current window location.
+ *
+ * @return {string} The base URL of the current window location.
+ */
+export const getBaseUrl = () => {
+    const { protocol, hostname, port } = window.location;
+    return protocol + '//' + hostname + (port ? `:${port}` : '');
+};
+/**
+ * Returns the URL of the current page by appending the base URL with the pathname.
+ *
+ * @return {string} The URL of the current page.
+ */
+export const getPageUrl = () => {
+    return getBaseUrl() + window.location.pathname;
+};
+/**
+ * Removes the trailing slash from a given path.
+ *
+ * @param {string} path - The path to remove the trailing slash from.
+ * @return {string} The path without the trailing slash.
+ */
+export const removeTrailingSlash = (path) => {
+    if (path.length > 1 && path.charAt(path.length - 1) === '/') {
+        return path.substring(0, path.length - 1);
+    }
+    return path;
+};
+/**
+ * Determines if a given string is a valid JSON string representing an object.
+ *
+ * @param {string} str - The string to be checked.
+ * @return {boolean} Returns true if the string is a valid JSON string of an object, false otherwise.
+ */
+export const isStringifiedObject = (str) => {
+    try {
+        const parsed = JSON.parse(str);
+        return (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed));
+    }
+    catch (e) {
+        return false;
+    }
+};
+/**
+ * Sanitizes an ID by removing any characters that are not a letter, number, slash, or dash and replacing any slashes with dashes.
+ *
+ * @param {string} id - The ID to be sanitized.
+ * @return {string} The sanitized ID.
+ */
+export const sanitizeId = (id) => {
+    return id.replace(/[^a-z0-9\/-]/g, '').replace(/\//g, '-');
+};

package/dist/vite/index.d.ts

@@ -0,0 +1,2 @@
+export * from './vue';
+export * from './react';

package/dist/vite/index.js

@@ -0,0 +1,2 @@
+export * from './vue';
+export * from './react';

package/dist/vite/react.d.ts

@@ -0,0 +1,45 @@
+import type { Plugin } from 'vite';
+export interface CreopseReactPluginOptions {
+    /**
+     * Path to the manifest.jsonc file, relative to the project root.
+     * @default './manifest.jsonc'
+     */
+    manifestPath?: string;
+    /**
+     * Source directory, relative to the project root.
+     * @default './src'
+     */
+    srcDir?: string;
+    /**
+     * Output directory for the build.
+     * @default 'frontend'
+     */
+    outDir?: string;
+    /**
+     * Path to the i18n locales directory, relative to the project root.
+     * @default './src/i18n/locales'
+     */
+    i18nLocalesPath?: string;
+    /**
+     * Directories to scan for auto-imports, relative to the project root.
+     * @default ['src/hooks']
+     */
+    hooksDirs?: string[];
+    /**
+     * Shared modules for Module Federation.
+     * 'react', 'react-dom' and 'zustand' are always included.
+     * @default []
+     */
+    shared?: string[];
+    /**
+     * Whether to enable UnoCSS.
+     * @default false
+     */
+    unocss?: boolean;
+    /**
+     * Whether to generate an eslint auto-import config file.
+     * @default false
+     */
+    eslintAutoImport?: boolean;
+}
+export declare function CreopseReactPlugin(options?: CreopseReactPluginOptions): Plugin;

package/dist/vite/react.js

@@ -0,0 +1,152 @@
+import federation from '@originjs/vite-plugin-federation';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+import react from '@vitejs/plugin-react';
+import { parse, stringify } from 'comment-json';
+import fs from 'fs';
+import path from 'path';
+import copy from 'rollup-plugin-copy';
+import UnoCSS from 'unocss/vite';
+import AutoImportPlugin from 'vite-plugin-auto-import-lite';
+import i18nextLoader from 'vite-plugin-i18next-loader';
+import json5Plugin from 'vite-plugin-json5';
+import topLevelAwait from 'vite-plugin-top-level-await';
+import { DASHBOARD_MODULE_NAME, SETTINGS_MODULE_NAME } from '../utils/constants';
+import { sanitizeId } from '../utils/functions';
+// ——— Plugin ——————————————————————————————————————————————————————————————————
+export function CreopseReactPlugin(options = {}) {
+    const { manifestPath = './manifest.jsonc', srcDir = './src', outDir = 'frontend', i18nLocalesPath, hooksDirs = ['src/hooks'], shared = [], unocss = false, eslintAutoImport = false, } = options;
+    let root;
+    let manifest;
+    let pluginId;
+    let pluginEntry;
+    let exposes;
+    let previewPort;
+    let serverPort;
+    let sslEnabled;
+    function loadManifest() {
+        const fullPath = path.resolve(root, manifestPath);
+        const raw = fs.readFileSync(fullPath, 'utf-8');
+        manifest = parse(raw || '{}');
+        exposes = {};
+        if (manifest.pages && Array.isArray(manifest.pages)) {
+            for (const page of manifest.pages) {
+                exposes[`./${page.name}`] = page.module;
+            }
+        }
+        const dashboard = manifest.dashboard;
+        if (dashboard?.module) {
+            exposes[`./${DASHBOARD_MODULE_NAME}`] = dashboard.module;
+        }
+        const settings = manifest.settings;
+        if (settings?.module) {
+            exposes[`./${SETTINGS_MODULE_NAME}`] = settings.module;
+        }
+        const dev = manifest.development;
+        pluginId = sanitizeId(String(manifest.id)) || 'creopse-plugin';
+        pluginEntry = (manifest.entry || 'remoteEntry.js');
+        previewPort = (dev?.previewPort || 2160);
+        serverPort = (dev?.serverPort || 2161);
+        sslEnabled = (dev?.ssl || false);
+    }
+    return {
+        name: 'creopse-react-plugin',
+        config(config) {
+            root = config.root || process.cwd();
+            loadManifest();
+            const isPreview = process.env.APP_IS_PREVIEW === 'true';
+            const localesPath = i18nLocalesPath
+                ? path.resolve(root, i18nLocalesPath)
+                : path.resolve(root, srcDir, 'i18n/locales');
+            const sharedModules = ['react', 'react-dom', 'zustand', ...shared];
+            return {
+                envPrefix: 'APP_',
+                plugins: [
+                    react(),
+                    federation({
+                        name: pluginId,
+                        filename: pluginEntry,
+                        exposes,
+                        shared: sharedModules,
+                    }),
+                    topLevelAwait({
+                        promiseExportName: '__tla',
+                        promiseImportName: (i) => `__tla_${i}`,
+                    }),
+                    json5Plugin(),
+                    i18nextLoader({
+                        paths: [localesPath],
+                        include: ['**/*.json'],
+                    }),
+                    AutoImportPlugin({
+                        dirs: hooksDirs,
+                        imports: ['react'],
+                        vueTemplate: false,
+                        ...(eslintAutoImport
+                            ? {
+                                eslintrc: {
+                                    enabled: true,
+                                    filepath: './.eslintrc-auto-import.json',
+                                    globalsPropValue: true,
+                                },
+                            }
+                            : {}),
+                    }),
+                    ...(unocss ? [UnoCSS()] : []),
+                    ...(sslEnabled ? [basicSsl()] : []),
+                ],
+                resolve: {
+                    alias: [
+                        {
+                            find: '@',
+                            replacement: path.resolve(root, srcDir),
+                        },
+                    ],
+                    dedupe: ['react', 'react-dom', 'zustand'],
+                },
+                build: {
+                    target: 'esnext',
+                    outDir,
+                    rollupOptions: {
+                        plugins: [
+                            copy({
+                                targets: [
+                                    {
+                                        src: path.resolve(root, manifestPath),
+                                        dest: outDir,
+                                        transform() {
+                                            if (manifest?.mode) {
+                                                manifest.mode = isPreview ? 'development' : 'production';
+                                            }
+                                            const addBlankLineAfterCommas = (jsonc) => jsonc.replace(/(,)\s*\n/g, ',\n\n');
+                                            return addBlankLineAfterCommas(stringify(manifest, null, 2));
+                                        },
+                                    },
+                                ],
+                                hook: 'writeBundle',
+                                verbose: false,
+                                flatten: true,
+                            }),
+                        ],
+                    },
+                    assetsInlineLimit: Infinity,
+                    cssCodeSplit: false,
+                },
+                preview: {
+                    port: previewPort,
+                    strictPort: true,
+                    cors: true,
+                    headers: {
+                        'Access-Control-Allow-Origin': '*',
+                    },
+                },
+                server: {
+                    port: serverPort,
+                    cors: true,
+                    headers: {
+                        'Access-Control-Allow-Origin': '*',
+                    },
+                },
+            };
+        },
+    };
+}

package/dist/vite/vue.d.ts

@@ -0,0 +1,40 @@
+import type { Plugin } from 'vite';
+export interface CreopseVuePluginOptions {
+    /**
+     * Path to the manifest.jsonc file, relative to the project root.
+     * @default './manifest.jsonc'
+     */
+    manifestPath?: string;
+    /**
+     * Source directory, relative to the project root.
+     * @default './src'
+     */
+    srcDir?: string;
+    /**
+     * Output directory for the build.
+     * @default 'frontend'
+     */
+    outDir?: string;
+    /**
+     * Path to the i18n locales directory, relative to the project root.
+     * @default './src/i18n/locales'
+     */
+    i18nLocalesPath?: string;
+    /**
+     * Directories to scan for auto-imports, relative to the project root.
+     * @default ['src/composables']
+     */
+    composablesDirs?: string[];
+    /**
+     * Shared modules for Module Federation.
+     * The 'vue' and 'pinia' are always included.
+     * @default []
+     */
+    shared?: string[];
+    /**
+     * Whether to enable UnoCSS.
+     * @default false
+     */
+    unocss?: boolean;
+}
+export declare function CreopseVuePlugin(options?: CreopseVuePluginOptions): Plugin;

package/dist/vite/vue.js

@@ -0,0 +1,143 @@
+import federation from '@originjs/vite-plugin-federation';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+import vue from '@vitejs/plugin-vue';
+import { parse, stringify } from 'comment-json';
+import fs from 'fs';
+import path from 'path';
+import copy from 'rollup-plugin-copy';
+import UnoCSS from 'unocss/vite';
+import AutoImportPlugin from 'vite-plugin-auto-import-lite';
+import i18nextLoader from 'vite-plugin-i18next-loader';
+import json5Plugin from 'vite-plugin-json5';
+import topLevelAwait from 'vite-plugin-top-level-await';
+import { DASHBOARD_MODULE_NAME, SETTINGS_MODULE_NAME } from '../utils/constants';
+import { sanitizeId } from '../utils/functions';
+// ——— Plugin ——————————————————————————————————————————————————————————————————
+export function CreopseVuePlugin(options = {}) {
+    const { manifestPath = './manifest.jsonc', srcDir = './src', outDir = 'frontend', i18nLocalesPath, composablesDirs = ['src/composables'], shared = [], unocss = false, } = options;
+    let root;
+    let manifest;
+    let pluginId;
+    let pluginEntry;
+    let exposes;
+    let previewPort;
+    let serverPort;
+    let sslEnabled;
+    function loadManifest() {
+        const fullPath = path.resolve(root, manifestPath);
+        const raw = fs.readFileSync(fullPath, 'utf-8');
+        manifest = parse(raw || '{}');
+        exposes = {};
+        if (manifest.pages && Array.isArray(manifest.pages)) {
+            for (const page of manifest.pages) {
+                exposes[`./${page.name}`] = page.module;
+            }
+        }
+        const dashboard = manifest.dashboard;
+        if (dashboard?.module) {
+            exposes[`./${DASHBOARD_MODULE_NAME}`] = dashboard.module;
+        }
+        const settings = manifest.settings;
+        if (settings?.module) {
+            exposes[`./${SETTINGS_MODULE_NAME}`] = settings.module;
+        }
+        const dev = manifest.development;
+        pluginId = sanitizeId(String(manifest.id)) || 'creopse-plugin';
+        pluginEntry = (manifest.entry || 'remoteEntry.js');
+        previewPort = (dev?.previewPort || 2160);
+        serverPort = (dev?.serverPort || 2161);
+        sslEnabled = (dev?.ssl || false);
+    }
+    return {
+        name: 'creopse-vue-plugin',
+        config(config) {
+            root = config.root || process.cwd();
+            loadManifest();
+            const isPreview = process.env.APP_IS_PREVIEW === 'true';
+            const localesPath = i18nLocalesPath
+                ? path.resolve(root, i18nLocalesPath)
+                : path.resolve(root, srcDir, 'i18n/locales');
+            const sharedModules = ['vue', 'pinia', ...shared];
+            return {
+                envPrefix: 'APP_',
+                plugins: [
+                    vue(),
+                    federation({
+                        name: pluginId,
+                        filename: pluginEntry,
+                        exposes,
+                        shared: sharedModules,
+                    }),
+                    topLevelAwait({
+                        promiseExportName: '__tla',
+                        promiseImportName: (i) => `__tla_${i}`,
+                    }),
+                    json5Plugin(),
+                    i18nextLoader({
+                        paths: [localesPath],
+                        include: ['**/*.json'],
+                    }),
+                    AutoImportPlugin({
+                        dirs: composablesDirs,
+                        imports: ['vue', 'pinia'],
+                        vueTemplate: true,
+                    }),
+                    ...(unocss ? [UnoCSS()] : []),
+                    ...(sslEnabled ? [basicSsl()] : []),
+                ],
+                resolve: {
+                    alias: [
+                        {
+                            find: '@',
+                            replacement: path.resolve(root, srcDir),
+                        },
+                    ],
+                    dedupe: ['vue'],
+                },
+                build: {
+                    target: 'esnext',
+                    outDir,
+                    rollupOptions: {
+                        plugins: [
+                            copy({
+                                targets: [
+                                    {
+                                        src: path.resolve(root, manifestPath),
+                                        dest: outDir,
+                                        transform() {
+                                            if (manifest?.mode) {
+                                                manifest.mode = isPreview ? 'development' : 'production';
+                                            }
+                                            const addBlankLineAfterCommas = (jsonc) => jsonc.replace(/(,)\s*\n/g, ',\n\n');
+                                            return addBlankLineAfterCommas(stringify(manifest, null, 2));
+                                        },
+                                    },
+                                ],
+                                hook: 'writeBundle',
+                                verbose: false,
+                                flatten: true,
+                            }),
+                        ],
+                    },
+                    assetsInlineLimit: Infinity,
+                    cssCodeSplit: false,
+                },
+                preview: {
+                    port: previewPort,
+                    strictPort: true,
+                    cors: true,
+                    headers: {
+                        'Access-Control-Allow-Origin': '*',
+                    },
+                },
+                server: {
+                    port: serverPort,
+                    cors: true,
+                    headers: {
+                        'Access-Control-Allow-Origin': '*',
+                    },
+                },
+            };
+        },
+    };
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@creopse/bridge",
+  "description": "Creopse Bridge Toolkit",
+  "version": "0.0.1",
+  "private": false,
+  "author": "Noé Gnanih <noegnanih@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "exports": {
+    "./vite": "./dist/vite/index.js",
+    "./vite/vue": "./dist/vite/vue.js",
+    "./vite/react": "./dist/vite/react.js",
+    "./vue": "./dist/vue/index.js",
+    "./react": "./dist/react/index.js",
+    "./shared": "./dist/shared/index.js"
+  },
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "devDependencies": {
+    "@originjs/vite-plugin-federation": "^1.4.1",
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
+    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "comment-json": "^4.6.2",
+    "rollup-plugin-copy": "^3.5.0",
+    "tsc-alias": "^1.8.16",
+    "typescript": "~5.8.3",
+    "unocss": "^66.6.7",
+    "vite": "^7.0.5",
+    "vite-plugin-auto-import-lite": "^0.0.2",
+    "vite-plugin-i18next-loader": "^3.1.3",
+    "vite-plugin-json5": "^1.2.0",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "@creopse/utils": "0.0.16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/creopse/toolkit.git"
+  },
+  "keywords": [],
+  "bugs": {
+    "url": "https://github.com/creopse/toolkit/issues"
+  },
+  "homepage": "https://github.com/creopse/toolkit#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && tsc-alias"
+  }
+}