@wavemaker/rn-codegen 11.14.1-rc.6311 → 11.14.2-1.6423

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wavemaker/rn-codegen",
-    "version": "11.14.1-rc.6311",
+    "version": "11.14.2-1.6423",
     "description": "",
     "main": "index.js",
     "bin": {
@@ -25,6 +25,8 @@
         "@types/node": "18.11.10",
         "@types/prettier": "2.7.1",
         "@types/yargs": "17.0.15",
+        "@wavemaker/custom-widgets-m3": "11.14.2-1.6423",
+        "@wavemaker/foundation-css": "11.14.2-1.6423",
         "adm-zip": "0.5.9",
         "axios": "1.8.3",
         "clean-css": "5.1.5",
@@ -41,8 +43,8 @@
         "prettier": "2.3.0",
         "puppeteer": "5.4.0",
         "rimraf": "3.0.2",
-        "yargs": "16.2.0",
-        "@wavemaker/foundation-css": "11.14.1-rc.6311"
+        "style-dictionary": "4.1.0",
+        "yargs": "16.2.0"
     },
     "devDependencies": {
         "@types/adm-zip": "0.5.0",

package/src/app.generator.js

@@ -38,6 +38,7 @@ const utils_1 = require("./utils");
 const bind_ex_transformer_1 = __importDefault(require("./transpile/bind.ex.transformer"));
 const theme_service_1 = require("./theme/theme.service");
 const profile_1 = __importDefault(require("./profiles/profile"));
+const app_override_css_generator_1 = require("./theme/app-override-css.generator");
 const command_1 = require("../command");
 const APP_TEMPLATE = (0, utils_1.loadTemplate)(__dirname + '/templates/app.template');
 const APP_THEME_TEMPLATE = (0, utils_1.loadTemplate)(__dirname + '/templates/app.theme.template');
@@ -136,6 +137,7 @@ class AppGenerator {
         this.wmxComponents = [];
         this.jsFileImports = new Set();
         this.shouldNpmInstall = false;
+        this.shouldDoUnwantedPackagesCleanup = false;
         this.options = options;
         this.isPrefabApp = !!prefabName;
         this.wmxComponents = this.projectService.getWMXComponents();
@@ -303,6 +305,29 @@ class AppGenerator {
             item.servicesStr = servicesStr;
             item.filePath = this.getFilePath(item.name);
         });
+        const buildCachePath = `${this.projectPath}/.build-cache`;
+        if (fs_extra_1.default.existsSync(buildCachePath)) {
+            const buildCache = fs_extra_1.default.readJSONSync(buildCachePath);
+            if (!buildCache.deviceVariables) {
+                buildCache.deviceVariables = [];
+            }
+            // * Write deviceVariables to build-cache if it's changed compared to previous build
+            const excludeVariables = ['Device'];
+            const filteredDeviceVariables = pluginOperationConfig.filter((v) => !excludeVariables.includes(v.type)).map((v) => v.method);
+            if (!(0, lodash_1.isEqual)(buildCache.deviceVariables, filteredDeviceVariables)) {
+                // console.log('<== Project device variables changed ==>');
+                buildCache.deviceVariables = filteredDeviceVariables;
+                this.shouldDoUnwantedPackagesCleanup = true;
+                fs_extra_1.default.writeJSONSync(buildCachePath, buildCache);
+            }
+            else if (this.incBuilder) {
+                // * If device variables are the same, return early
+                return;
+            }
+        }
+        else {
+            fs_extra_1.default.writeJSONSync(buildCachePath, {});
+        }
         // * get plugin list before generating device operation loader
         this.pluginsInApp = await this.getListOfPackagesUsedInGeneratedApp();
         // previously pluginOperationConfig was only having device variables from app.variables.js, not from Page level variables (e.g, Main.variables.js)
@@ -360,12 +385,12 @@ class AppGenerator {
         (0, utils_1.writeFile)(`${this.projectPath}/src/device-permission-service.js`, permissionService);
         (0, utils_1.writeFile)(`${this.projectPath}/src/plugin-provider.js`, pluginProvider);
     }
-    prepareDeviceOperationLoader() {
+    async prepareDeviceOperationLoader() {
         const config = fs_extra_1.default.readJsonSync(`${this.projectPath}/wm_rn_config.json`, {
             encoding: 'utf8'
         });
         appVersion = config.version;
-        this.generatePluginsOperationConfig();
+        await this.generatePluginsOperationConfig();
     }
     isPartial(type) {
         return type === 'PARTIAL' || type === 'LEFTNAV' || type === 'POPOVER' || type === 'TEMPLATE';
@@ -574,7 +599,8 @@ class AppGenerator {
                         supportedLocales: supportedLocales,
                         animatedSplash: animatedSplash,
                         sslPinning: sslPinning,
-                        enableWavePulse: enableWavePulse
+                        enableWavePulse: enableWavePulse,
+                        enableDesignTokens: !!config.preferences.enableDesignTokens
                     });
                     (0, utils_1.writeFile)(`${this.projectPath}/App.js`, output);
                 });
@@ -616,15 +642,15 @@ class AppGenerator {
         }
         return this.themeService.generateStudioStyles(styles);
     }
-    async generateComponent(info, type, name) {
+    async generateComponent(info, type, name, dynamicProps) {
         if (this.incBuilder && !this.incBuilder.isFragmentModified(name)) {
             return Promise.resolve();
         }
         if (this.incBuilder) {
             console.log(`Generating ${name} component.`);
         }
-        const lType = type.toLowerCase();
-        const typeLabel = (0, lodash_1.capitalize)(type);
+        const lType = type.toLowerCase().replace('-', '');
+        const typeLabel = type.split('-').map(t => (0, lodash_1.capitalize)(t)).join('');
         const variables = JSON.parse(info.variables);
         Object.keys(variables).map((key) => {
             if (variables[key]["category"] === 'wm.LiveVariable') {
@@ -664,6 +690,7 @@ class AppGenerator {
                 lType: lType,
                 typeLabel: typeLabel,
                 dynamicPrefabProps: this.dynamicPrefabProps || {},
+                dynamicProps: dynamicProps || {},
                 prefabName: this.prefabName,
                 markup: '\n' + transpiledOutput.markup,
                 components: transpiledOutput.components,
@@ -675,7 +702,7 @@ class AppGenerator {
             });
             (0, utils_1.writeFile)(`${dest}/${name}.component.js`, component);
             const script = SCRIPT_TEMPLATE({
-                typeLabel: typeLabel,
+                typeLabel: type === 'CUSTOM-WIDGET' ? 'Widget' : typeLabel,
                 script: info.script
             });
             (0, utils_1.writeFile)(`${dest}/${name}.script.js`, script);
@@ -687,7 +714,10 @@ class AppGenerator {
                 this.savePageDesignStyles(this.generateDesignStyles(info.styles), name);
             }
             return Promise.all(transpiledOutput.prefabs.map(p => this.generatePrefabComponent(p, false))).then(() => {
-                return Promise.all(transpiledOutput.xcomponents.map(c => this.generateWMXComponents(c, false)));
+                return Promise.all([
+                    ...transpiledOutput.customWidgets.map(p => this.generateCustomWidget(p, false)),
+                    ...transpiledOutput.xcomponents.map(c => this.generateWMXComponents(c, false))
+                ]);
             });
         }
         catch (e) {
@@ -695,34 +725,42 @@ class AppGenerator {
             throw e;
         }
     }
-    generatePrefabProps(name, projectPath) {
+    getPropertiesInfo(info) {
+        var _a;
         const dynamicProps = {};
-        return this.projectService.getPrefabInfo(name)
-            .then(info => {
-            const propConfig = {};
-            Object.keys(info.config.properties).map((k) => {
-                const value = info.config.properties[k].value;
-                if ((0, lodash_1.isString)(value) && value.startsWith('bind:')) {
-                    let exStr = decodeURIComponent(value.substring(5));
-                    dynamicProps[k] = `this.eval(() => ${(0, bind_ex_transformer_1.default)(exStr, '_this', 'attr')})`;
-                    propConfig[k] = null;
-                }
-                else {
-                    propConfig[k] = value === undefined ? null : value;
-                }
-            });
-            let propsStr = JSON.stringify(propConfig);
-            if (info.config.events) {
-                propsStr = propsStr.replace(/\}$/, '');
-                Object.keys(info.config.events).map((k) => {
-                    propsStr += `${propsStr.length === 1 ? '' : ','} ${k} : () => {}`;
-                });
-                propsStr += '}';
+        const propConfig = {};
+        Object.keys(((_a = info.config) === null || _a === void 0 ? void 0 : _a.properties) || {}).map((k) => {
+            const value = info.config.properties[k].value;
+            if ((0, lodash_1.isString)(value) && value.startsWith('bind:')) {
+                let exStr = decodeURIComponent(value.substring(5));
+                dynamicProps[k] = `this.eval(() => ${(0, bind_ex_transformer_1.default)(exStr, '_this', 'attr')})`;
+                propConfig[k] = null;
             }
-            const props = COMPONENT_PROPS_TEMPLATE({
-                props: propsStr
+            else {
+                propConfig[k] = value === undefined ? null : value;
+            }
+        });
+        let propsStr = JSON.stringify(propConfig);
+        if (info.config.events) {
+            propsStr = propsStr.replace(/\}$/, '');
+            Object.keys(info.config.events).map((k) => {
+                propsStr += `${propsStr.length === 1 ? '' : ','} ${k} : () => {}`;
             });
-            (0, utils_1.writeFile)(`${projectPath}/src/prefabs/${name}/src/pages/Main/Main.props.js`, props);
+            propsStr += '}';
+        }
+        return {
+            props: info.config.properties,
+            dynamicProps,
+            propsCode: COMPONENT_PROPS_TEMPLATE({
+                props: propsStr
+            })
+        };
+    }
+    generatePrefabProps(name, projectPath) {
+        return this.projectService.getPrefabInfo(name)
+            .then(info => {
+            const { dynamicProps, propsCode } = this.getPropertiesInfo(info);
+            (0, utils_1.writeFile)(`${projectPath}/src/prefabs/${name}/src/pages/Main/Main.props.js`, propsCode);
             return dynamicProps;
         });
     }
@@ -839,6 +877,17 @@ class AppGenerator {
             return this.generateComponent(info, 'PARTIAL', name);
         });
     }
+    generateCustomWidget(name, overwrite = true) {
+        if (!overwrite && this.transpiledComponents.partials[name]) {
+            return Promise.resolve();
+        }
+        this.transpiledComponents.customWidgets[name] = true;
+        return this.projectService.getCustomWidgetInfo(name).then(async (info) => {
+            const { dynamicProps, propsCode } = this.getPropertiesInfo(info);
+            (0, utils_1.writeFile)(`${this.projectPath}/src/custom-widgets/${name}/${name}.props.js`, propsCode);
+            return this.generateComponent(info, 'CUSTOM-WIDGET', name, dynamicProps);
+        });
+    }
     generateServiceDefs() {
         return this.projectService.getServiceDefs().then(serviceDefs => {
             const output = SERVICE_DEFINITIONS({ serviceDefs: JSON.stringify(serviceDefs) });
@@ -996,6 +1045,30 @@ class AppGenerator {
             }
         });
         this.projectPackageDependencies = projectDependencies;
+        // * Write widgetImports to build-cache if it's changed compared to previous build
+        const widgetImports = projectDependencies.filter((dep) => !dep.removePlugin);
+        const buildCachePath = `${this.projectPath}/.build-cache`;
+        if (fs_extra_1.default.existsSync(buildCachePath)) {
+            const buildCache = fs_extra_1.default.readJSONSync(buildCachePath);
+            if (!buildCache.widgetImports) {
+                buildCache.widgetImports = [];
+            }
+            const excludeVariables = ['Device'];
+            const filteredWidgetImports = widgetImports.filter((v) => !excludeVariables.includes(v.name));
+            if (!(0, lodash_1.isEqual)(buildCache.widgetImports, filteredWidgetImports)) {
+                // console.log('<== Project widget imports changed ==>');
+                this.shouldDoUnwantedPackagesCleanup = true;
+                buildCache.widgetImports = filteredWidgetImports;
+                fs_extra_1.default.writeJSONSync(buildCachePath, buildCache);
+            }
+            else if (this.incBuilder) {
+                // * If widget imports are the same, return early
+                return;
+            }
+        }
+        else {
+            fs_extra_1.default.writeJSONSync(buildCachePath, {});
+        }
     }
     /**
      * @description Get the list of device variables used
@@ -1493,6 +1566,18 @@ class AppGenerator {
             fs_extra_1.default.writeFileSync(`${this.projectPath}/package.json`, JSON.stringify(jsonData, null, 4));
         }
     }
+    async generateFoundationTheme() {
+        await new app_override_css_generator_1.AppOverrideCSSGenerator(this.projectService.path).generate();
+        const tokenOverridesCSS = this.projectService.getAppTokenOverrides();
+        const tokenOverrides = this.themeService.generateOverrideRNTokens(tokenOverridesCSS);
+        const themePath = `${this.projectService.path}/design-tokens/foundation`;
+        fs_extra_1.default.copySync(`${__dirname}/templates/foundation-theme/dist`, themePath);
+        const colorSchemes = JSON.stringify(tokenOverrides.colorSchemes, null, 4);
+        const variants = JSON.stringify(tokenOverrides.variants, null, 4);
+        const content = `export default ${colorSchemes};\n\nexport const variants = ${variants};`;
+        fs_extra_1.default.writeFileSync(`${this.projectPath}/app.designtokens.js`, content);
+        return [themePath];
+    }
     async generateAppTheme() {
         if (this.isPrefabApp) {
             return Promise.resolve();
@@ -1500,16 +1585,26 @@ class AppGenerator {
         if (this.incBuilder) {
             console.log(`Generating App theme.`);
         }
-        return this.projectService.getThemes().then(themes => {
+        const enableDesignTokens = await this.projectService.isDesignTokenEnabled();
+        console.log('Design Tokens Enabled?', enableDesignTokens);
+        return Promise.resolve()
+            .then(() => {
+            if (enableDesignTokens) {
+                return this.generateFoundationTheme();
+            }
+            else {
+                return this.projectService.getThemes();
+            }
+        }).then(themes => {
             return themes.map(t => {
                 const themeName = (0, lodash_1.last)(t.split('/'));
-                fs_extra_1.default.copySync(t, this.projectPath + '/theme/' + themeName);
+                fs_extra_1.default.copySync(t, `${this.projectPath}/${enableDesignTokens ? 'design-tokens' : 'theme'}/${themeName}`);
                 return themeName;
             });
         }).then(themes => {
             themes.map(t => [
-                `${this.projectPath}/theme/${t}/android/assets`,
-                `${this.projectPath}/theme/${t}/ios/assets`
+                `${this.projectPath}/${enableDesignTokens ? 'design-tokens' : 'theme'}/${t}/android/assets`,
+                `${this.projectPath}/${enableDesignTokens ? 'design-tokens' : 'theme'}/${t}/ios/assets`
             ]).flat().map(p => {
                 const resources = this.getAllResources((str) => true, p, 'theme/assets');
                 const content = THEME_ASSET_RESOLVER_TEMPLATE({
@@ -1522,6 +1617,7 @@ class AppGenerator {
         }).then(themes => {
             const output = APP_THEME_TEMPLATE({
                 themes: themes,
+                enableDesignTokens: enableDesignTokens,
                 selectedTheme: this.projectService.getSelectedTheme()
             });
             (0, utils_1.writeFile)(`${this.projectPath}/app.theme.js`, output);
@@ -1600,7 +1696,7 @@ class AppGenerator {
             .then((build) => (build && this.generateBootstrapScript()))
             .then(() => !this.incBuilder || this.incBuilder.isConfigModified())
             .then((build) => (build && this.generateBabelConfig()))
-            .then(() => !this.incBuilder || this.incBuilder.isThemeModified())
+            .then(() => !this.incBuilder || this.incBuilder.isThemeModified() || this.incBuilder.isFoundationThemeModified())
             .then((build) => (build && this.generateAppTheme()))
             .then(() => !this.incBuilder || this.incBuilder.isi18nModified())
             .then((build) => (build && this.copyi18nFiles()))
@@ -1621,7 +1717,15 @@ class AppGenerator {
             .then(() => this.copyPackageLockJson())
             .then(() => this.checkWidgetUsageInComponentFiles())
             .then(() => this.checkPackageUsageInJSFiles())
-            .then(() => this.removeUnusedPackages())
+            .then(() => !this.incBuilder || this.shouldDoUnwantedPackagesCleanup)
+            .then((removePackages) => {
+            if (removePackages) {
+                return this.removeUnusedPackages();
+            }
+            else {
+                return Promise.resolve();
+            }
+        })
             .then(() => !this.incBuilder)
             .then((build) => (build && this.prettify()))
             .then(() => this.projectService.copyNpmPackages(this.projectPath))