@wavemaker/rn-codegen 11.6.2-next.1417103 → 11.6.2-next.1417105

rn-codegen/src/templates/app.template

@@ -29,6 +29,7 @@ import WM from '@wavemaker/app-rn-runtime/runtime/platform.api';
 import { getThemes, getSelectedTheme, hasAppTheme, setAppTheme, resolveThemeAsset } from './app.theme';
 import styles from './app.style';
 import fontConfig from './font.config';
+import { resetTheme } from './revert-to-1.0.styles';
 import LocaleResolver from './src/resolve/locale.resolver';
 import ResourceResolver from './src/resolve/resource.resolver';
 import WM_CUSTOM_FORMATTERS from './src/extensions/formatters';
@@ -108,6 +109,10 @@ class App extends BaseApp {
   loadFonts() {
     fontConfig.fonts.map((f) => f.path = ResourceResolver.resolve(f.path, this.baseUrl));
     const fonts = [...themeVariables.INSTANCE.fontConfig?.fonts, ...fontConfig.fonts];
+    themeVariables.INSTANCE.fontConfig?.fonts.filter((f) => f.csspath).map((f) => {
+        const iconStyle = f.csspath?.default;
+        Object.keys(iconStyle).forEach((s) => this.appConfig.theme.addStyle(s, null, iconStyle[s]));
+    });
     fontConfig.fonts.filter((f) => f.csspath).map((f) => {
         f.csspath = f.csspath.replace('.css', '.js');
         const iconStyle = ResourceResolver.resolve(f.csspath, this.baseUrl)?.default;
@@ -131,9 +136,17 @@ class App extends BaseApp {
     return getSelectedTheme();
   }
 
-  setTheme(name) {
+  setTheme(name, variables) {
     StorageService.setItem('activeTheme', name);
-    setAppTheme(name).then(() => this.refresh());
+    setAppTheme(name, variables).then(() => this.refresh());
+  }
+
+  setThemeVariables(variables) {
+    this.setTheme(this.activeTheme, variables);
+  }
+
+  resetThemeVariables() {
+    this.setTheme(this.activeTheme);
   }
 
   getTheme() {
@@ -147,6 +160,13 @@ class App extends BaseApp {
   loadTheme() {
     return this.getTheme()
       .then((theme) => setAppTheme(theme))
+      .then((theme) => {
+        if (appConfig.preferences?.appStyle && appConfig.preferences?.appStyle === "1.0" ) {
+          // reset theme
+          resetTheme(this.appConfig.theme);
+        }
+        return theme;
+      })
   }
 
   get appLocale() {

rn-codegen/src/templates/app.theme.template

@@ -1,6 +1,7 @@
 import { isIos} from '@wavemaker/app-rn-runtime/core/utils';
 import themeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
 import BASE_THEME from '@wavemaker/app-rn-runtime/styles/theme';
+import { clone } from 'lodash-es';
 import fontConfig from './font.config';
 
 const themes = {
@@ -24,12 +25,18 @@ let selectedTheme = null;
 let selectedThemeName = null;
 let getAsset = null;
 const appTheme = BASE_THEME.$new('app-theme', {});
-export const setAppTheme = (themeName) => {
+const defaultVariables = clone(themeVariables.INSTANCE);
+export const setAppTheme = (themeName, variables) => {
     return Promise.resolve().then(() => {
         selectedTheme = (themes[themeName]||{})[isIos() ? 'ios': 'android'];
         if (selectedTheme) {
             selectedThemeName = themeName;
-            Object.assign(themeVariables.INSTANCE, selectedTheme.variables());
+            const styles = selectedTheme.style();
+            themeVariables.INSTANCE = Object.assign({},
+                defaultVariables, 
+                selectedTheme.variables(),
+                styles['theme-variables'],
+                variables);
             getAsset = selectedTheme.getAsset();
             if (fontConfig.baseFont) {
                 themeVariables.baseFont = fontConfig.baseFont;

rn-codegen/src/templates/bootstrap.template

@@ -15,6 +15,7 @@ import * as config from './wm_rn_config.json';
 export const appConfig = {
     url : config.serverPath !==  'http://NOSERVERREQUIRED.com' ? config.serverPath : null,
     theme: appTheme,
+    preferences: config.preferences,
     splash: {animationSrc: config.splash.animationSrc, src: config.splash.src},
     spinner: {loader: config.loader, json:{}},
     refresh: () => {},
@@ -29,6 +30,7 @@ appConfig.url = location.href.split('/rn-bundle')[0];
 injector.set('APP_CONFIG', appConfig);
 injector.I18nService.set(AppI18nService);
 
+LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
 global.wm = WM;
 {{#if enableLogs}}
 {{else}}
@@ -37,6 +39,11 @@ LogBox.ignoreAllLogs();
 axios.defaults.withCredentials = true;
 StorageService.target = config.id;
 
+if(config.initScript){
+const initScript = ResourceResolver.resolve(config.initScript, appConfig.url);
+initScript.default && initScript.default();
+}
+
 const bootstrap = () => {
     Logger.init();
     injector.set('AppConfig', appConfig);

rn-codegen/src/templates/component/component.template

@@ -55,7 +55,6 @@ export default class {{name}}{{typeLabel}} extends Base{{typeLabel}} {
     this.pageParams = this.state.props;
     {{/ifEquals}}
     const _this = this.proxy;
-    add{{typeLabel}}Script(this.App, this.proxy);
     this.theme = (props.themeToUse || this.appConfig.theme);
     const styleOverrides = this.theme.getStyle(props.classname);
     this.theme = this.theme.$new('{{name}}-styles', styles);
@@ -82,6 +81,7 @@ export default class {{name}}{{typeLabel}} extends Base{{typeLabel}} {
     this.startUpVariables = [{{#each startUpVariables}}'{{this}}',{{/each}}];
     this.startUpActions = [{{#each startUpActions}}'{{this}}',{{/each}}];
     this.autoUpdateVariables = [{{#each autoUpdateVariables}}'{{this}}',{{/each}}];
+    add{{typeLabel}}Script(this.App, this.proxy);
   }
   
   provideAsset = (path) => this.handleUrl(path);

rn-codegen/src/templates/package.web.json

@@ -10,8 +10,9 @@
     },
     "dependencies": {
         "@unimodules/react-native-adapter": "6.3.9",
-        "@wavemaker/app-rn-runtime": "11.6.2-next.1417103",
-        "@wavemaker/variables": "11.6.2-next.1417103",
+        "@wavemaker/app-rn-runtime": "11.6.2-next.1417105",
+        "@wavemaker/variables": "11.6.2-next.1417105",
+        "@wavemaker/rn-codegen": "11.6.2-next.1417105",
         "axios": "^1.4.0",
         "css-mediaquery": "^0.1.2",
         "deprecated-react-native-prop-types": "~4.1.0",
@@ -34,6 +35,7 @@
         "expo-constants": "14.4.2",
         "@react-native/assets": "1.0.0",
         "hermes-engine": "0.11.0",
+        "imask": "^7.5.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.72.4",
@@ -66,6 +68,8 @@
         "react-native-restart": "0.0.27",
         "@expo/webpack-config": "18.0.1",
         "@babel/core": "7.20.2",
+        "@babel/standalone": "^7.23.10",
+        "@babel/plugin-syntax-jsx": "7.21.4",
         "victory": "^36.5.3"
     },
     "devDependencies": {
@@ -79,7 +83,7 @@
         "babel-plugin-transform-remove-console": "6.9.4",
         "@babel/plugin-proposal-optional-chaining": "7.21.0",
         "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-        "@babel/plugin-syntax-jsx": "7.21.4"
+        "@types/babel__standalone": "^7.1.7"
     },
     "resolutions": {
         "react-error-overlay": "6.0.9",

rn-codegen/src/templates/project/component/dynamic/component-generator.js

@@ -0,0 +1,77 @@
+import WmText from "@wavemaker/app-rn-runtime/components/input/text/text.component";
+import WmTextarea from '@wavemaker/app-rn-runtime/components/input/textarea/textarea.component';
+import WmNumber from "@wavemaker/app-rn-runtime/components/input/number/number.component";
+import WmCurrency from '@wavemaker/app-rn-runtime/components/input/currency/currency.component';
+import WmSelect from '@wavemaker/app-rn-runtime/components/input/select/select.component';
+import WmSearch from '@wavemaker/app-rn-runtime/components/basic/search/search.component';
+import WmChips from '@wavemaker/app-rn-runtime/components/input/chips/chips.component';
+import WmCheckbox from '@wavemaker/app-rn-runtime/components/input/checkbox/checkbox.component';
+import WmCheckboxset from '@wavemaker/app-rn-runtime/components/input/checkboxset/checkboxset.component';
+import WmToggle from '@wavemaker/app-rn-runtime/components/input/toggle/toggle.component';
+import WmSwitch from '@wavemaker/app-rn-runtime/components/input/switch/switch.component';
+import WmRadioset from '@wavemaker/app-rn-runtime/components/input/radioset/radioset.component';
+import WmDate from '@wavemaker/app-rn-runtime/components/input/epoch/date/date.component';
+import WmDatetime from '@wavemaker/app-rn-runtime/components/input/epoch/datetime/datetime.component';
+import WmTime from '@wavemaker/app-rn-runtime/components/input/epoch/time/time.component';
+import WmSlider from '@wavemaker/app-rn-runtime/components/input/slider/slider.component';
+import WmRating from '@wavemaker/app-rn-runtime/components/input/rating/rating.component';
+import WmLayoutgrid from '@wavemaker/app-rn-runtime/components/container/layoutgrid/layoutgrid.component';
+import WmGridrow from '@wavemaker/app-rn-runtime/components/container/layoutgrid/gridrow/gridrow.component';
+import WmGridcolumn from '@wavemaker/app-rn-runtime/components/container/layoutgrid/gridcolumn/gridcolumn.component';
+import registerTransformers from '@wavemaker/rn-codegen/src/transpile/components/transform-register';
+import WmFormField from '@wavemaker/app-rn-runtime/components/data/form/form-field/form-field.component';
+import WmLabel from '@wavemaker/app-rn-runtime/components/basic/label/label.component';
+
+import {transpileMarkup}  from '@wavemaker/rn-codegen/src/transpile/transpile';
+import {transform} from '@babel/standalone';
+import React from "react";
+
+// this is to avoid tree shaking
+export const components = {WmText};
+
+registerTransformers();
+
+export const generate = (wavemakerMarkup, fragment) => {
+    // transpile wavemaker markup into react markup
+    const transpiledComponents = transpileMarkup(wavemakerMarkup, false, false);
+    try {
+        // use babel library convert it into React.creatElement
+        const transformedCode = transform(transpiledComponents.markup, {
+            presets: ['react']
+        }).code;
+
+        const importedComponents = {
+            'WmText': WmText,
+            'WmTextarea': WmTextarea,
+            'WmNumber': WmNumber,
+            'WmCurrency': WmCurrency,
+            'WmSelect': WmSelect,
+            'WmSearch': WmSearch,
+            'WmChips': WmChips,
+            'WmCheckbox': WmCheckbox,
+            'WmCheckboxset': WmCheckboxset,
+            'WmToggle': WmToggle,
+            'WmSwitch': WmSwitch,
+            'WmRadioset': WmRadioset,
+            'WmDate': WmDate,
+            'WmDatetime': WmDatetime,
+            'WmTime': WmTime,
+            'WmSlider': WmSlider,
+            'WmRating': WmRating,
+            'WmLayoutgrid': WmLayoutgrid,
+            'WmGridrow': WmGridrow,
+            'WmGridcolumn': WmGridcolumn,
+            'WmFormField': WmFormField,
+            'WmLabel': WmLabel
+        }
+
+        // Evaluate the transformed code synchronously
+        const dynamicComponentFunction = new Function(['React, fragment', ...Object.keys(importedComponents)].join(', '), `return ${transformedCode}`);
+        const dynamicComponent = dynamicComponentFunction(React, fragment, ...Object.values(importedComponents));
+        return dynamicComponent;
+    } catch (error) {
+        console.error('Error generating component:', error);
+        return null;
+    }
+
+}

rn-codegen/src/templates/project/component/dynamic/form.generator.js

@@ -0,0 +1,45 @@
+import {generate} from './component-generator';
+import {forEach, isArray} from "lodash";
+
+// Generate the form field with given field definition. Add a grid column wrapper around the form field.
+const setMarkupForFormField = (field, columnWidth) =>  {
+    let propsTmpl = '';
+    forEach(field, (value, key) => {
+        propsTmpl = `${propsTmpl} ${key}="${value}"`;
+    });
+    return `<wm-gridcolumn columnwidth="${columnWidth}"><wm-form-field ${propsTmpl}></wm-form-field></wm-gridcolumn>`;
+};
+
+// Function to generate and compile the form fields from the metadata
+const generateFormFields = (metadata, formName) => {
+    let noOfColumns = 1;
+    const columnWidth = 12 / noOfColumns;
+    let fieldTemplate = '';
+    let colCount = 0;
+    let fields = metadata;
+
+    if (!isArray(fields)) {
+        return;
+    }
+
+    while (fields[colCount]) {
+        let colTmpl = '';
+        if (fields[colCount]) {
+            colTmpl += setMarkupForFormField(fields[colCount], columnWidth);
+        }
+        colCount++;
+        fieldTemplate += `<wm-gridrow>${colTmpl}</wm-gridrow>`;
+    }
+    fieldTemplate = `<wm-layoutgrid type="dynamic" dynamicForm = "${formName}">${fieldTemplate}</wm-layoutgrid>`;
+
+    return fieldTemplate;
+}
+
+
+export const dynamicForm = (metadata, formName, fragment) => {
+    // convert metadata into wavemaker markup
+    const wmMarkup = generateFormFields(metadata, formName);
+
+   // using component generator transform wavemaker markup into react elements
+    return generate(wmMarkup, fragment);
+}

rn-codegen/src/templates/project/esbuild/esbuild.script.js

@@ -46,6 +46,7 @@ class EsBuilder {
         const _package = fs.readJSONSync(packageFile);
         console.log('patch applied on package at.. ', packageFile);
         delete _package['module'];
+        delete _package['type'];
         fs.writeFileSync(packageFile, JSON.stringify(_package, null, 4));
       }
     });
@@ -173,7 +174,10 @@ class EsBuilder {
       return p.build && p.build(destPath);
     });
     return Promise.all(promises)
-        .then(() => this.patchPackageLib(['@koale/useworker', 'victory']))
+        .then(() => this.patchPackageLib(['@koale/useworker', 'victory',
+          'd3-array', 'd3-color', 'd3-ease', 'd3-format', 'd3-interpolate', 
+          'd3-path', 'd3-scale', 'd3-shape', 'd3-time', 'd3-time-format',
+          'd3-timer', 'd3-voronoi']))
         .then(() => this.patchWithDevTools('expo/build/launch/withDevTools.js'))
         .then(() => this.patchReactNativeWeb())
         .then(() => this.patchReactNativeAssets())

rn-codegen/src/templates/project/esbuild/jsconfig.json

@@ -7,7 +7,8 @@
       "react-native": ["../node_modules/react-native-web"],
       "react-native-web/src/*": ["../node_modules/react-native-web/dist/*"],
       "@wavemaker/app-rn-runtime/*": ["../node_modules/@wavemaker/app-rn-runtime/*"],
-      "@wavemaker/variables/*": ["../node_modules/@wavemaker/variables/*"]
+      "@wavemaker/variables/*": ["../node_modules/@wavemaker/variables/*"],
+      "@wavemaker/rn-codegen/*": ["../node_modules/@wavemaker/rn-codegen/*"]
     }
   }
 }

rn-codegen/src/templates/project/package.json

@@ -10,8 +10,9 @@
     },
     "dependencies": {
         "@unimodules/react-native-adapter": "6.3.9",
-        "@wavemaker/app-rn-runtime": "11.6.2-next.1417103",
-        "@wavemaker/variables": "11.6.2-next.1417103",
+        "@wavemaker/app-rn-runtime": "11.6.2-next.1417105",
+        "@wavemaker/variables": "11.6.2-next.1417105",
+        "@wavemaker/rn-codegen": "11.6.2-next.1417105",
         "axios": "^1.4.0",
         "css-mediaquery": "^0.1.2",
         "deprecated-react-native-prop-types": "~4.1.0",
@@ -34,6 +35,7 @@
         "expo-constants": "14.4.2",
         "@react-native/assets": "1.0.0",
         "hermes-engine": "0.11.0",
+        "imask": "^7.5.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.72.4",
@@ -65,7 +67,9 @@
         "setimmediate": "1.0.5",
         "react-native-restart": "0.0.27",
         "@expo/webpack-config": "18.0.1",
-        "@babel/core": "7.20.2"
+        "@babel/core": "7.20.2",
+        "@babel/standalone": "^7.23.10",
+        "@babel/plugin-syntax-jsx": "7.21.4"
     },
     "devDependencies": {
         "webpack-dev-middleware": "6.1.1",
@@ -78,7 +82,7 @@
         "babel-plugin-transform-remove-console": "6.9.4",
         "@babel/plugin-proposal-optional-chaining": "7.21.0",
         "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-        "@babel/plugin-syntax-jsx": "7.21.4"
+        "@types/babel__standalone": "^7.1.7"
     },
     "resolutions": {
         "react-error-overlay": "6.0.9",