@wavemaker/rn-codegen 12.0.0-next.46502 → 12.0.0-next.47810

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

@@ -1,133 +0,0 @@
-import React from 'react';
-
-import { ScrollView } from 'react-native-gesture-handler';
-
-import { AssetProvider } from '@wavemaker/app-rn-runtime/core/asset.provider';
-import Base{{typeLabel}} from '@wavemaker/app-rn-runtime/runtime/base-{{lType}}.component';
-import { useWatcher } from '@wavemaker/app-rn-runtime/runtime/watcher';
-import { WmMemo } from '@wavemaker/app-rn-runtime/runtime/memo.component';
-import { ThemeProvider } from '@wavemaker/app-rn-runtime/styles/theme';
-{{#each eagerImports}}
-import {{name}} from '{{from}}';
-{{/each}}
-{{#ifEquals lType 'prefab' this}}
-import { PartialServiceImpl } from '@wavemaker/app-rn-runtime/runtime/services/partial.service';
-
-import defaultProps from './{{name}}.props';
-import partialConfig from '../../partials/partial-config';
-{{/ifEquals}}
-import { isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
-
-import { merge, get as _get } from 'lodash';
-import ResourceResolver from '../../resolve/resource.resolver';
-import add{{typeLabel}}Script from './{{name}}.script';
-import styles from './{{name}}.style';
-import getVariables from './{{name}}.variables';
-
-const FragmentContext = React.createContext();
-
-{{#each lazyImports}}
-const {{name}} = React.lazy(() => import('{{from}}'));
-{{/each}}
-
-{{#each components}}
-const {{@key}} = {{{this}}};
-
-{{/each}}
-
-export default class {{name}}{{typeLabel}} extends Base{{typeLabel}} {
-
-  {{#ifEquals lType 'prefab' this}}
-    {{#each dynamicPrefabProps}}
-        {{@key}};
-    {{/each}}
-  {{/ifEquals}}
-
-  components;
-
-  constructor(props) {
-    {{#ifEquals lType 'prefab' this}}
-    super(props, defaultProps, new PartialServiceImpl(partialConfig));
-    {{else}}
-    super(props);
-    {{/ifEquals}}
-    {{#ifEquals lType 'partial' this}}
-    this.pageParams = this.state.props;
-    {{/ifEquals}}
-    const _this = this.proxy;
-    this.name = "{{name}}";
-    this.theme = (props.themeToUse || this.appConfig.theme);
-    const styleOverrides = this.theme.getStyle(props.classname);
-    this.theme = this.theme.$new('{{name}}-styles', styles);
-    if (styleOverrides) {
-      this.theme = this.theme.$new('{{name}}-styleOverrides', styleOverrides);
-    }
-  }
-
-  {{#ifEquals lType 'prefab' this}}
-    evalDynamicProps() {
-      const _this = this.proxy;
-      {{#each dynamicPrefabProps}}
-      _this.setPropDefault('{{@key}}', {{{this}}});
-      {{/each}}
-    }
-  {{/ifEquals}}
-
-  init() {
-    const data = getVariables(this.proxy);
-    this.fragmentVariables = data.Variables;
-    this.fragmentActions = data.Actions;
-    this.Variables = Object.assign(this.Variables, data.Variables);
-    this.Actions = Object.assign(this.Actions, data.Actions);
-    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);
-
-  componentDidMount() {
-    {{#ifEquals lType 'prefab' this}}
-      {{#if profile.useLocalMetadata}}
-      Promise.resolve(require('../../../service-definitions.json').serviceDefs)
-      {{else}}
-      this.getServiceDefinitions()
-      {{/if}}
-      .then((defs) => {
-        this.serviceDefinitions = defs;
-        this.init();
-        super.componentDidMount();
-        super.onFragmentReady();
-      });
-    {{else}}
-      this.init();
-      super.componentDidMount();
-      super.onFragmentReady();
-    {{/ifEquals}}
-  }
-
-  handleUrl(url) {
-    return this.App.handleUrl(url) ||
-      ResourceResolver.resolve(url, this.resourceBaseUrl) ||
-      super.handleUrl(url);
-  }
-
-  {{#ifEquals lType 'page' this}}
-  renderPage() {
-  {{/ifEquals}}
-  {{#ifEquals lType 'prefab' this}}
-  renderPrefab() {
-  this.evalDynamicProps();
-  {{/ifEquals}}
-  {{#ifEquals lType 'partial' this}}
-  renderPartial() {
-  {{/ifEquals}}
-    const fragment = this.proxy;
-    return (<FragmentContext.Provider value={this.proxy}>
-      <AssetProvider value={this.provideAsset}>
-        {{{markup}}}
-      </AssetProvider>
-    </FragmentContext.Provider>);
-  }
-}

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

@@ -1,18 +0,0 @@
-@import url('{{basePath}}variables.less');
-{{#each styledefs}}
-
-
-{{#ifNotEmpty this.document this}}
-/**********************************************************************************
-{{this.document}}
-***********************************************************************************/
-{{/ifNotEmpty}}
-{{this.className}} {
-    {{#each style}}
-    {{@key}}: {{this}};
-    {{/each}}
-}
-{{/each}}
-
-@import (optional) url('{{basePath}}../custom/{{path}}');
-@import (optional) url('{{basePath}}../custom/os/{{path}}');

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

@@ -1,95 +0,0 @@
-{
-    "main": "index.js",
-    "scripts": {
-        "start": "expo start",
-        "android": "expo start --android",
-        "ios": "expo start --ios",
-        "web": "expo start --web",
-        "eject": "expo eject",
-        "postinstall": "echo \"\""
-    },
-    "dependencies": {
-        "@wavemaker/app-rn-runtime": "12.0.0-next.46502",
-        "@wavemaker/variables": "12.0.0-next.46502",
-        "@wavemaker/rn-codegen": "12.0.0-next.46502",
-        "@wavemaker/wavepulse-agent": "1.0.11",
-        "deprecated-react-native-prop-types": "4.1.0",
-        "expo": "50.0.17",
-        "expo-build-properties": "0.12.0",
-        "@expo/vector-icons": "14.0.0",
-        "@expo/metro-runtime": "3.1.3",
-        "expo-font": "11.10.3",
-        "expo-file-system": "16.0.9",
-        "expo-camera": "14.1.3",
-        "expo-av": "13.10.6",
-        "expo-barcode-scanner": "12.9.3",
-        "expo-web-browser": "12.8.2",
-        "expo-device": "5.9.4",
-        "expo-network": "5.8.0",
-        "expo-location": "16.5.5",
-        "expo-localization": "14.8.4",
-        "expo-contacts": "12.8.2",
-        "expo-calendar": "12.2.1",
-        "expo-splash-screen": "0.26.5",
-        "expo-document-picker": "11.10.1",
-        "expo-constants": "15.4.6",
-        "expo-modules-core": "1.11.13",
-        "@react-native/assets": "1.0.0",
-        "hermes-engine": "0.11.0",
-        "imask": "7.6.0",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
-        "react-native": "0.73.6",
-        "react-native-web": "0.19.6",
-        "@react-native/assets-registry": "0.74.83",
-        "@react-native-async-storage/async-storage": "1.21.0",
-        "@react-native-community/netinfo": "11.1.0",
-        "react-native-gesture-handler": "2.14.0",
-        "react-native-reanimated": "3.6.2",
-        "react-native-bundle-splitter": "2.2.3",
-        "react-native-safe-area-context": "4.8.2",
-        "@react-native-community/datetimepicker": "7.6.3",
-        "@react-native-community/slider": "4.5.2",
-        "react-native-circular-progress": "1.4.0",
-        "@react-native-masked-view/masked-view": "0.3.0",
-        "react-native-snap-carousel": "3.9.1",
-        "react-native-svg": "13.4.0",
-        "react-native-ssl-public-key-pinning": "1.2.3",
-        "@wavemaker/react-native-ssl-publickey": "1.0.2",
-        "victory-native": "36.6.11",
-        "@react-navigation/native": "6.1.7",
-        "react-native-pager-view": "6.2.3",
-        "react-native-webview": "13.6.4",
-        "react-native-vector-icons": "10.0.3",
-        "@react-navigation/drawer": "6.6.3",
-        "react-native-screens": "3.29.0",
-        "react-native-svg-transformer": "1.3.0",
-        "lottie-react-native": "6.5.1",
-        "react-lottie-player": "2.0.0",
-        "react-native-mime-types": "2.5.0",
-        "expo-linear-gradient": "12.7.2",
-        "setimmediate": "1.0.5",
-        "react-native-restart": "0.0.27",
-        "@expo/webpack-config": "19.0.1",
-        "@babel/core": "7.20.2",
-        "@babel/standalone": "7.23.10",
-        "@babel/plugin-syntax-jsx": "7.21.4",
-        "victory": "^36.5.3"
-    },
-    "devDependencies": {
-        "metro-minify-terser": "0.80.10",
-        "webpack-dev-middleware": "6.1.1",
-        "react-devtools-core": "4.28.0",
-        "@babel/cli": "7.14.5",
-        "esbuild": "0.15.15",
-        "esbuild-plugin-resolve": "1.0.3",
-        "fs-extra": "10.0.0",
-        "@babel/plugin-proposal-export-namespace-from": "7.18.9",
-        "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",
-        "@types/babel__standalone": "7.1.7",
-        "@expo/metro-config": "^0.7.1"
-    },
-    "private": true
-}

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

@@ -1,49 +0,0 @@
-{
-  "expo": {
-    "androidStatusBar": {
-      "backgroundColor": "#000000",
-      "translucent": false,
-      "barStyle": "dark-content"
-    },
-    "name": "wm-react-native-app",
-    "slug": "wm-react-native-app",
-    "version": "1.0.0",
-    "jsEngine": "hermes",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "cover"
-    },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "backgroundColor": "#007bff",
-      "supportsTablet": true
-    },
-    "android": {
-      "softwareKeyboardLayoutMode": "pan",
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png"
-      }
-    },
-    "web": {
-      "bundler": "metro",
-      "favicon": "./assets/favicon.png"
-    },
-    "plugins": [
-      [
-        "expo-build-properties",
-        {
-          "android": {
-            "useLegacyPackaging": true
-          }
-        }
-      ]
-    ]
-  }
-}

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

@@ -1,77 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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);
-}