@ray-js/builder-component 0.3.0-beta.1c347991

package/README.md

@@ -0,0 +1,40 @@
+# @ray-js/builder-component
+
+组件构建器，将文件按运行时拆分为多文件。
+
+## Examples
+
+### 全平台转换
+
+input:
+
+```
+src/index.ts
+```
+
+output:
+
+```
+index.web.js
+index.wechat.js
+index.native.js
+index.js
+```
+
+### 按需平台
+
+input:
+
+```
+src/index.ts
+src/index.wechat.ts
+```
+
+output:
+
+```
+index.web.js
+index.wechat.js  # 原文件转换
+index.native.js
+index.js
+```

package/lib/babel/import-replacement/index.d.ts

@@ -0,0 +1,10 @@
+import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+declare const _default: (api: object, options: {
+    replace: (source: string) => string;
+}, dirname: string) => {
+    visitor: {
+        ImportDeclaration(this: import("@babel/core").PluginPass, path: NodePath<t.ImportDeclaration>): void;
+    };
+};
+export default _default;

package/lib/babel/import-replacement/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const helper_plugin_utils_1 = require("@babel/helper-plugin-utils");
+exports.default = (0, helper_plugin_utils_1.declare)((api, options) => {
+    api.assertVersion(7);
+    const replace = options.replace;
+    return {
+        visitor: {
+            ImportDeclaration(path) {
+                path.node.source.value = replace(path.node.source.value);
+            },
+        },
+    };
+});

package/lib/build.d.ts

@@ -0,0 +1,7 @@
+import { CliOptions } from '@ray-js/types';
+declare type Options = Pick<CliOptions, 'source' | 'output' | 'watch'> & {
+    cwd: string;
+    transformMode: 'pure' | 'auto';
+};
+export default function build(options: Options): Promise<void>;
+export {};

package/lib/build.js

@@ -0,0 +1,93 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const chokidar_1 = __importDefault(require("chokidar"));
+const colors_1 = __importDefault(require("colors"));
+const globby_1 = __importDefault(require("globby"));
+const path_1 = __importDefault(require("path"));
+const shared_1 = require("@ray-js/shared");
+const transform_1 = require("./transform");
+colors_1.default.enable();
+const LOG_PREFIX = 'builder-component';
+function build(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { cwd = process.cwd(), source = 'src', output = 'lib', watch = false, transformMode = 'auto', } = options;
+        const sourceDir = path_1.default.join(cwd, source);
+        const outputDir = path_1.default.join(cwd, output);
+        if (watch) {
+            shared_1.log.info(LOG_PREFIX, 'watching...');
+            const watcher = chokidar_1.default.watch(['**/*.*', '!**/demos/**/*.*', '!**/__tests__/**/*.*', '!**/*.md'], {
+                cwd: sourceDir,
+            });
+            watcher.on('all', (event, filePath, _) => __awaiter(this, void 0, void 0, function* () {
+                const file = path_1.default.join(sourceDir, filePath);
+                if (event === 'change' || event === 'add') {
+                    shared_1.log.info(`[${event}]`, filePath);
+                    yield (0, transform_1.transformPlatformFiles)({
+                        file,
+                        mode: transformMode,
+                        sourceDir,
+                        outputDir,
+                    }).catch((error) => {
+                        console.error(error);
+                    });
+                }
+                else {
+                    shared_1.log.warn(`[${event}]`, filePath);
+                    if (event === 'unlink') {
+                        yield (0, transform_1.unlinkPlatformFiles)({
+                            outputDir,
+                            sourceDir,
+                            file,
+                        });
+                    }
+                }
+            }));
+        }
+        else {
+            const files = globby_1.default.sync(['**/*.*', '!**/demos/**/*.*', '!**/__tests__/**/*.*'], {
+                dot: false,
+                cwd: sourceDir,
+                absolute: true,
+            });
+            if (!files || files.length === 0) {
+                shared_1.log.error(LOG_PREFIX, 'Not exist any files'.red, cwd);
+                process.exit(0);
+            }
+            for (let index = 0; index < files.length; index++) {
+                const file = files[index];
+                yield (0, transform_1.transformPlatformFiles)({
+                    file,
+                    mode: transformMode,
+                    sourceDir,
+                    outputDir,
+                }).catch((error) => {
+                    console.error(error);
+                });
+            }
+            const dtsStartTime = Date.now();
+            shared_1.log.info(LOG_PREFIX, 'd.ts generating...'.yellow);
+            const typeFiles = yield (0, transform_1.generateDTS)(files.filter((file) => /\.tsx?$/.test(file)));
+            for (let index = 0; index < Object.entries(typeFiles).length; index++) {
+                const [dtsFile, content] = Object.entries(typeFiles)[index];
+                const fileBase = path_1.default.relative(sourceDir, dtsFile);
+                const dtsFilePath = path_1.default.join(outputDir, fileBase);
+                (0, shared_1.writeFileSync)(dtsFilePath, content);
+                shared_1.log.verbose(LOG_PREFIX, fileBase.gray);
+            }
+            shared_1.log.info(LOG_PREFIX, 'd.ts done.'.green, Date.now() - dtsStartTime, 'ms');
+        }
+    });
+}
+exports.default = build;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import build from './build';
+export { build };

package/lib/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.build = void 0;
+const build_1 = __importDefault(require("./build"));
+exports.build = build_1.default;

package/lib/transform/babelTransform.d.ts

@@ -0,0 +1,8 @@
+import type { Modules } from '@ray-js/babel-preset-standard';
+import { Target } from '@ray-js/types';
+export declare type BabelTransformOptions = {
+    modules: Modules;
+    target?: Target;
+    pure?: boolean;
+};
+export default function babelTransform(file: string, options: BabelTransformOptions): Promise<import("@babel/core").BabelFileResult>;

package/lib/transform/babelTransform.js

@@ -0,0 +1,90 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const core_1 = require("@babel/core");
+const env_loader_1 = require("@ray-js/env-loader");
+function babelTransform(file, options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        options = Object.assign({ modules: 'auto' }, options);
+        let babelPlugin = [];
+        let codeMap;
+        const source = fs_extra_1.default.readFileSync(file).toString();
+        let code = source;
+        if (options.target) {
+            const { target } = options;
+            process.env.PLATFORM = target;
+            process.env.REMAX_PLATFORM = target;
+            babelPlugin = [
+                [
+                    require.resolve('../babel/import-replacement'),
+                    {
+                        replace: function (source) {
+                            if (source.endsWith('.mini')) {
+                                // .mini.js 是 remax 中对小程序统称的文件后缀
+                                return source.replace(/\.mini$/, `.${target}`);
+                            }
+                            return source;
+                        },
+                    },
+                ],
+                [
+                    require.resolve('babel-plugin-import'),
+                    {
+                        libraryName: '@remax/wechat',
+                        transformToDefaultImport: false,
+                        camel2DashComponentName: false,
+                        customName: (name) => {
+                            if (name.endsWith('Props')) {
+                                return '@remax/wechat';
+                            }
+                            return `@remax/wechat/esm/hostComponents/${name}/index`;
+                        },
+                    },
+                    '@remax/wechat',
+                ],
+            ];
+            const { code: removeEnvCode, map } = yield (0, env_loader_1.traverseImport)({ platform: options.target }, source, {
+                sourceMaps: true,
+                sourceMapTarget: path_1.default.basename(file),
+                sourceFileName: file,
+            });
+            code = removeEnvCode;
+            codeMap = map;
+        }
+        return yield (0, core_1.transformAsync)(code, {
+            babelrc: false,
+            configFile: false,
+            sourceMaps: true,
+            presets: [
+                [
+                    require.resolve('@ray-js/babel-preset-standard'),
+                    {
+                        modules: options.modules,
+                        jsx: 'react',
+                        platform: options.target,
+                        macro: false,
+                        // native 不需要 polyfill
+                        useBuiltIns: ['native', 'ios', 'android'].includes(options.target) ? false : undefined,
+                    },
+                ],
+            ],
+            plugins: babelPlugin,
+            inputSourceMap: codeMap,
+            filename: file,
+        });
+    });
+}
+exports.default = babelTransform;

package/lib/transform/index.d.ts

@@ -0,0 +1,17 @@
+import { TransformOptions } from '@ray-js/types';
+export { generateDTS } from './type';
+export declare function replaceExt(file: string, ext: string): string;
+/**
+ * 根据原文件，移除对应生成的平台文件
+ * @param options
+ */
+export declare function unlinkPlatformFiles(options: {
+    file: string;
+    outputDir: string;
+    sourceDir: string;
+}): void;
+/**
+ * 转换器 将文件转成所需要的格式
+ * ts|js 需要生成对应的平台地址
+ */
+export declare function transformPlatformFiles(options: TransformOptions): Promise<void>;

package/lib/transform/index.js

@@ -0,0 +1,196 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformPlatformFiles = exports.unlinkPlatformFiles = exports.replaceExt = exports.generateDTS = void 0;
+const colors_1 = __importDefault(require("colors"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const shared_1 = require("@ray-js/shared");
+const types_1 = require("@ray-js/types");
+const babelTransform_1 = __importDefault(require("./babelTransform"));
+var type_1 = require("./type");
+Object.defineProperty(exports, "generateDTS", { enumerable: true, get: function () { return type_1.generateDTS; } });
+colors_1.default.enable();
+function replaceExt(file, ext) {
+    if (typeof file !== 'string') {
+        return file;
+    }
+    if (file.length === 0) {
+        return file;
+    }
+    const nFileName = path_1.default.basename(file, path_1.default.extname(file)) + ext;
+    return path_1.default.join(path_1.default.dirname(file), nFileName);
+}
+exports.replaceExt = replaceExt;
+const transformTarget = [
+    types_1.PlatformTarget.wechat,
+    types_1.PlatformTarget.web,
+    types_1.PlatformTarget.ios,
+    types_1.PlatformTarget.android,
+    types_1.PlatformTarget.tuya,
+]; // 构建的目标平台
+/**
+ * 根据原文件，移除对应生成的平台文件
+ * @param options
+ */
+function unlinkPlatformFiles(options) {
+    const { sourceDir, outputDir, file } = options;
+    const fileBase = path_1.default.relative(sourceDir, file);
+    let fileExt;
+    if (fileBase.endsWith('.d.ts')) {
+        fileExt = '.d.ts';
+    }
+    else {
+        fileExt = path_1.default.extname(fileBase);
+    }
+    const likePaths = [];
+    const libFile = path_1.default.join(outputDir, fileBase);
+    if (['.ts', '.tsx', '.js', '.jsx'].includes(fileExt) && fileExt !== '.d.ts') {
+        likePaths.push(replaceExt(libFile, '.js'));
+        transformTarget.forEach((target) => {
+            likePaths.push(replaceExt(libFile, `.${target}.js`));
+        });
+    }
+    else {
+        likePaths.push(libFile);
+    }
+    likePaths.filter(fs_extra_1.default.existsSync).map(fs_extra_1.default.unlinkSync);
+}
+exports.unlinkPlatformFiles = unlinkPlatformFiles;
+const PLATFORM_EXTENSION = [...Object.keys(types_1.PlatformTarget), 'mini', 'native'];
+// 平台文件后缀
+// .mini.js 是 remax 定义的小程序文件后缀
+const REGEXP_PLATFORM_EXTENSION = new RegExp(`\\.(?<target>(${PLATFORM_EXTENSION.join('|')}))\\.(ts|js)x?$`);
+/**
+ * 是否为平台文件后缀文件
+ *
+ * @param file
+ * @example
+ *  .native.js .wechat.js .tuya.js
+ */
+function isPlatformExtension(file) {
+    const fileName = path_1.default.basename(file);
+    return REGEXP_PLATFORM_EXTENSION.test(fileName);
+}
+function getOtherPlatformFile(file) {
+    const platform = [];
+    const ext = path_1.default.extname(file);
+    PLATFORM_EXTENSION.forEach((target) => {
+        const targetExt = `.${target}${ext}`;
+        const targetFile = replaceExt(file, targetExt);
+        if (fs_extra_1.default.existsSync(targetFile)) {
+            if (target in types_1.PlatformTargetPresets) {
+                platform.push(...types_1.PlatformTargetPresets[target]);
+            }
+            else {
+                platform.push(target);
+            }
+        }
+    });
+    return platform;
+}
+/**
+ * 转换器 将文件转成所需要的格式
+ * ts|js 需要生成对应的平台地址
+ */
+function transformPlatformFiles(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { file, mode, outputDir, sourceDir } = options;
+        const startTime = Date.now();
+        const fileBase = path_1.default.relative(sourceDir, file);
+        let fileExt;
+        if (file.endsWith('.d.ts')) {
+            fileExt = '.d.ts';
+        }
+        else {
+            fileExt = path_1.default.extname(file);
+        }
+        let transformPure = true;
+        // 生成 JS 文件
+        let babelResult;
+        let outputFile;
+        let transformOutputTargets = [];
+        if (['.ts', '.tsx', '.js', '.jsx'].includes(fileExt) && fileExt !== '.d.ts') {
+            // 智能构建模式, 将 index.js 分成对应的几个端
+            if (mode === 'auto') {
+                if (isPlatformExtension(file)) {
+                    transformPure = false;
+                    // 自定义构建模式, 根据当前文件后缀
+                    // 根据当前文件后缀, 获取目标平台
+                    const { groups } = REGEXP_PLATFORM_EXTENSION.exec(fileBase);
+                    const { target: targetPreset } = groups;
+                    if (targetPreset in types_1.PlatformTargetPresets) {
+                        // 预置模式
+                        const platformTargetPreset = types_1.PlatformTargetPresets[targetPreset];
+                        for (let k = 0; k < platformTargetPreset.length; k++) {
+                            const target = platformTargetPreset[k];
+                            const ext = `.${target}.js`;
+                            babelResult = yield (0, babelTransform_1.default)(file, { target: target, modules: false });
+                            transformOutputTargets.push(target);
+                            if (babelResult && typeof babelResult.code === 'string') {
+                                outputFile = replaceExt(path_1.default.join(outputDir, fileBase.replace(`.${targetPreset}`, '')), ext);
+                                yield (0, shared_1.writeFileSync)(outputFile, babelResult.code);
+                            }
+                        }
+                    }
+                    else {
+                        babelResult = yield (0, babelTransform_1.default)(file, {
+                            target: targetPreset,
+                            modules: false,
+                        });
+                        transformOutputTargets.push(targetPreset);
+                        if (babelResult && typeof babelResult.code === 'string') {
+                            outputFile = replaceExt(path_1.default.join(outputDir, fileBase), '.js');
+                            yield (0, shared_1.writeFileSync)(outputFile, babelResult.code);
+                        }
+                    }
+                }
+                else {
+                    const presetPlatform = getOtherPlatformFile(file);
+                    for (let k = 0; k < transformTarget.length; k++) {
+                        const target = transformTarget[k];
+                        // 存在其他平台的预置文件不再生成
+                        if (!presetPlatform.includes(target)) {
+                            const ext = `.${target}.js`;
+                            babelResult = yield (0, babelTransform_1.default)(file, { target, modules: false });
+                            transformOutputTargets.push(target);
+                            if (babelResult && typeof babelResult.code === 'string') {
+                                outputFile = replaceExt(path_1.default.join(outputDir, fileBase), ext);
+                                yield (0, shared_1.writeFileSync)(outputFile, babelResult.code);
+                            }
+                        }
+                    }
+                }
+            }
+            if (transformPure) {
+                // 保留原始文件
+                // 纯 js es6=>es5 转换 可用于 browser & 小程序 使用的工具库构建
+                babelResult = yield (0, babelTransform_1.default)(file, { pure: true, modules: false });
+                transformOutputTargets.push('*');
+                if (babelResult && typeof babelResult.code === 'string') {
+                    outputFile = replaceExt(path_1.default.join(outputDir, fileBase), '.js');
+                    yield (0, shared_1.writeFileSync)(outputFile, babelResult.code);
+                }
+            }
+        }
+        else {
+            // 非 js 等文件，直接拷贝输出
+            const fileContent = fs_extra_1.default.readFileSync(file);
+            const outputFile = path_1.default.join(outputDir, fileBase);
+            yield (0, shared_1.writeFileSync)(outputFile, fileContent);
+        }
+        shared_1.log.info(`transform`, fileBase.cyan, transformOutputTargets, `${Date.now() - startTime}ms`.white);
+    });
+}
+exports.transformPlatformFiles = transformPlatformFiles;

package/lib/transform/type.d.ts

@@ -0,0 +1,3 @@
+export declare function generateDTS(files: string[]): Promise<{
+    [path: string]: string;
+}>;

package/lib/transform/type.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateDTS = void 0;
+const ts = __importStar(require("typescript"));
+function generateDTS(files) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const createdFiles = {};
+        const options = {
+            allowJs: true,
+            declaration: true,
+            emitDeclarationOnly: true,
+            esModuleInterop: true,
+            target: ts.ScriptTarget.ES5,
+            noUnusedParameters: true,
+            noUnusedLocals: true,
+            strictNullChecks: true,
+            jsx: ts.JsxEmit.Preserve,
+            allowSyntheticDefaultImports: true,
+        };
+        const host = ts.createCompilerHost(options);
+        host.writeFile = (fileName, contents) => {
+            createdFiles[fileName] = contents;
+        };
+        const program = ts.createProgram(files, options, host);
+        program.emit();
+        return createdFiles;
+    });
+}
+exports.generateDTS = generateDTS;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@ray-js/builder-component",
+  "version": "0.3.0-beta.1c347991",
+  "description": "Ray builder for component",
+  "keywords": [
+    "ray"
+  ],
+  "author": "子长 <zichang.nong@tuya.com>",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "clean": "rm -rf lib esm dts",
+    "build": "tsc -p ./tsconfig.build.json",
+    "watch": "tsc -p ./tsconfig.build.json --watch"
+  },
+  "dependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/helper-plugin-utils": "^7.14.5",
+    "@babel/traverse": "^7.16.3",
+    "@babel/types": "^7.16.0",
+    "@ray-js/babel-preset-standard": "^0.3.0-beta.1c347991",
+    "@ray-js/env-loader": "^0.3.0-beta.1c347991",
+    "@ray-js/shared": "^0.3.0-beta.1c347991",
+    "@ray-js/types": "^0.3.0-beta.1c347991",
+    "babel-plugin-import": "^1.13.3",
+    "chokidar": "^3.5.2",
+    "colors": "1.4.0",
+    "fs-extra": "^10.0.0",
+    "globby": "11.x"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^9.0.12",
+    "typescript": "^4.5.2"
+  },
+  "maintainers": [
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "gitHead": "e0bd013022ddda63380d3c9e20fd8cadb46cd61f",
+  "repository": {}
+}