@wavemaker-ai/rn-codegen 1.0.0-rc.647469

package/src/templates/bootstrap.template

@@ -0,0 +1,122 @@
+import { LogBox } from 'react-native';
+import injector from '@wavemaker-ai/app-rn-runtime/core/injector';
+import Logger from '@wavemaker-ai/app-rn-runtime/core/logger';
+import StorageService from '@wavemaker-ai/app-rn-runtime/core/storage.service';
+import WM from '@wavemaker-ai/app-rn-runtime/runtime/platform.api';
+import AppI18nService from '@wavemaker-ai/app-rn-runtime/runtime/services/app-i18n.service';
+import appTheme from './app.theme';
+import PageConfig from './src/pages/pages-config';
+import PartialConfig from './src/partials/partial-config';
+
+{{#each prefabUsed}}
+import {{this}}Config from './src/prefabs/{{this}}/src/partials/partial-config';
+{{/each}}
+
+import SecurityService from '@wavemaker-ai/app-rn-runtime/runtime/services/app-security.service';
+import axios from 'axios';
+import ResourceResolver from './src/resolve/resource.resolver';
+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: config.splash,
+    spinner: {loader: config.loader, json:{}},
+    refresh: () => {},
+    SecurityService: SecurityService,
+    appLocale: {},
+    diagnostics: {
+        appStartTime: Date.now(),
+        appReadyTime: Date.now(),
+        pageStartTime: -1,
+        pageReadyTime: -1
+    },
+    revertLayoutToExpo50: config.revertLayoutToExpo50,
+    edgeToEdgeConfig:config.edgeToEdgeConfig,
+    disableNavigationAnimation:config.disableNavigationAnimation
+};
+
+{{#if profile.generateWeb}}
+appConfig.url = location.href.split('/rn-bundle')[0];
+{{/if}}
+
+injector.set('APP_CONFIG', appConfig);
+injector.I18nService.set(AppI18nService);
+
+LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
+global.wm = WM;
+{{#ifEquals profile.targetPlatform 'web' this}}
+window.addEventListener('message', (event) => {
+  try {
+    let data = {};
+    if (event.data !== "undefined" && typeof event.data === "string" && event.data.trim()) {
+      try {
+        data = JSON.parse(event.data);
+      } catch (jsonError) {
+        data = {};
+      }
+    } else {
+      data = event?.data || {};
+    }
+
+    if (data?.type === 'wavepulse') {
+      const wavepulseScript = window.wm.App.tryToconnectWavepulse({
+        url: data.url,
+        channelId: data.channelId
+      });
+      console.log('Received wavepulse:', wavepulseScript);
+    }
+
+    if (data?.key === 'switch-mode') {
+        const mode = data?.modes?.color === 'dark' ? 'color-dark' : 'light';
+        wm.App.setColorScheme(mode);
+    }
+
+  } catch (e) {
+    console.error('error while connecting to wavepulse : ', e);
+  }
+});
+{{/ifEquals}}
+{{#if enableLogs}}
+{{else}}
+LogBox.ignoreAllLogs();
+{{/if}}
+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 = () => {
+    const prefabsPartials = [
+        {{#each prefabUsed}}
+        {
+            prefabName: "{{this}}",
+            partials: {{this}}Config
+        },
+        {{/each}}
+    ]
+
+    Logger.init();
+    injector.set('AppConfig', appConfig);
+    appConfig.appId = config.id;
+    appConfig.pages = PageConfig;
+    appConfig.partials = PartialConfig;
+    appConfig.prefabs = {partials: prefabsPartials};
+    {{#ifEquals profile.targetPlatform 'web' this}}
+    {{#ifEquals loader 'skeleton' this}}
+    {{else}}    
+    return axios.get(ResourceResolver.resolve("resources/files/"+config.loader+".json", appConfig.url)).then((response)=>{
+        appConfig.spinner.json = response.data;
+        appConfig.refresh();
+    });
+    {{/ifEquals}}
+    {{else}}
+        appConfig.spinner.json = ResourceResolver.resolve("resources/files/"+config.loader+".json", appConfig.url);
+        appConfig.refresh();
+    {{/ifEquals}}
+};
+export default bootstrap;

package/src/templates/build-info/error.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Preview Build Failure</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta charset="UTF-8" />
+    <style>
+      body {
+        font-family: sans-serif;
+        background-color: #101010;
+      }
+
+      .info-container {
+        display: flex;
+        height: 90vh;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 12pt;
+        text-align: center;
+        padding: 16pt;
+        color: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="info-container">
+      Build failed. Please check logs.
+    </div>
+  </body>
+</html>

package/src/templates/build-info/index.html

@@ -0,0 +1,90 @@
+<!--cHJldmlld2J1aWxk-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Preview Build</title>
+    <meta charset="UTF-8" />
+    <style>
+      body {
+        font-family: sans-serif;
+        background-color: #101010;
+        margin: 0;
+      }
+
+      .info-container {
+        display: flex;
+        height: 100vh;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 12pt;
+        text-align: center;
+        padding: 0 16pt;
+        color: #fff;
+      }
+      .lds-ripple {
+        display: inline-block;
+        position: relative;
+        width: 80pt;
+        height: 80pt;
+      }
+      .lds-ripple div {
+        position: absolute;
+        border: 4pt solid #1794ef;
+        opacity: 1;
+        border-radius: 50%;
+        animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+      }
+      .lds-ripple div:nth-child(2) {
+        animation-delay: -0.5s;
+      }
+      @keyframes lds-ripple {
+        0% {
+          top: 36pt;
+          left: 36pt;
+          width: 0;
+          height: 0;
+          opacity: 1;
+        }
+        100% {
+          top: 0pt;
+          left: 0pt;
+          width: 72pt;
+          height: 72pt;
+          opacity: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="info-container">
+      <div class="lds-ripple"><div></div><div></div></div>
+      Preview is being generated. When preview is ready, screen will refresh
+      automatically. <br />
+      please wait...
+    </div>
+    <script type="text/javascript">
+      function check() {
+        function reqListener () {
+          if (this.status <= 0 
+            || this.status >= 400 
+            || !this.responseText 
+            || this.responseText.startsWith('<!--cHJldmlld2J1aWxk-->')) {
+            setTimeout(check, 2000);
+          } else {
+            window.location.reload(true);
+          }
+        }
+        var oReq = new XMLHttpRequest();
+        oReq.addEventListener("load", reqListener);
+        oReq.open("GET", location.href);
+        oReq.send();
+      }
+      check();
+    </script>
+  </body>
+</html>

package/src/templates/build-info/info.html

@@ -0,0 +1,64 @@
+<html>
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WaveMaker Preview</title>
+    <style>
+        .show {
+            opacity: 0;
+        }
+
+        .hide {
+            opacity: 0;
+        }
+    </style>
+</head>
+
+<body style="height: 100vh; display: flex; padding: 16px;
+                justify-content: center; flex-direction: column;
+                font-family:Arial, Helvetica, sans-serif;
+                background-color: #111; color: #f4f4f4;line-height: 24px;overflow: hidden;">
+    <div>
+        <b style="color: #82d3e0;">1.</b> Studio web preview is disabled. To enable, visit Project Settings.<br>
+        <b style="color: #82d3e0;">2.</b> Otherwise, execute the following command in your local terminal.
+        <br>
+    </div>
+    <div>
+        <div style="position: relative;background-color: #ccc;color: #333; padding: 24px 16px 16px 16px;
+                        border-radius: 8px; font-family:monospace, 'Courier New', Courier;overflow: auto;margin: 8px 0;">
+            <div style="position: absolute;top: 0; right: 0; background: #666; padding: 2px 8px; color: #82d3e0;" onclick="copy()">Copy</div>
+            <div id="command-info" style="word-break: break-word;"></div>
+        </div>
+    </div>
+    <div>
+        <b style="color: #82d3e0;">3.</b> Then, open <a style="color: #82d3e0;" href="http://localhost:19009" target="_blank">http://localhost:19009</a> in a web browser.
+        <br><span><br><br><br><i style="color: #eee;">To know more, <a
+          href="https://docs.wavemaker.com/learn/react-native/generate-web-preview-locally" target="_blank"
+          style="color: #82d3e0;">please visit this link</a>.</i></span>
+        <span style="display:none">Modified at : {{modified_date}}</span>
+    </div>
+    <div id="message" style="position: fixed; top: 0; right: 0; 
+    background: #eee; color: #666; padding: 16px; left: 0; 
+    margin: 4pt; border-radius: 4pt;transition: opacity linear 1s;" class="hide">
+        Copied !!!
+    </div>
+    <script>
+        var div = document.getElementById('command-info');
+
+        function copy() {
+            // Copy the text inside the text field
+            navigator.clipboard.writeText(div.innerText);
+            document.getElementById('message').classList.remove('hide');
+        }
+        var xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == XMLHttpRequest.DONE) {
+                div.innerText = `wm-reactnative run web-preview "${location.href.split('/rn-bundle')[0]}#${xhr.responseText.split(';')[0]}"`;
+            }
+        }
+        xhr.open('GET', '/studio/services/auth/token', true);
+        xhr.send(null);
+    </script>
+</body>
+
+</html>

package/src/templates/component/component.props.template

@@ -0,0 +1 @@
+export default {{{props}}};

package/src/templates/component/component.template

@@ -0,0 +1,153 @@
+import React from 'react';
+
+import { ScrollView } from 'react-native-gesture-handler';
+
+import { AssetProvider } from '@wavemaker-ai/app-rn-runtime/core/asset.provider';
+import Base{{typeLabel}} from '@wavemaker-ai/app-rn-runtime/runtime/base-{{lType}}.component';
+import { useWatcher } from '@wavemaker-ai/app-rn-runtime/runtime/watcher';
+import { WmMemo } from '@wavemaker-ai/app-rn-runtime/runtime/memo.component';
+import { ThemeProvider } from '@wavemaker-ai/app-rn-runtime/styles/theme';
+{{#each eagerImports}}
+import {{name}} from '{{from}}';
+{{/each}}
+{{#contains 'prefab,customwidget' lType this}}
+import { PartialServiceImpl } from '@wavemaker-ai/app-rn-runtime/runtime/services/partial.service';
+
+import defaultProps from './{{name}}.props';
+import partialConfig from '../../partials/partial-config';
+{{/contains}}
+import { isWebPreviewMode } from '@wavemaker-ai/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}}
+
+  {{#ifEquals lType 'customwidget' this}}
+    {{#each dynamicPrefabProps}}
+        {{@key}};
+    {{/each}}
+  {{/ifEquals}}
+
+  components;
+
+  constructor(props) {
+    {{#contains 'prefab,customwidget' lType this}}
+    super(props, defaultProps, new PartialServiceImpl(partialConfig))
+    {{else}}
+    super(props);
+    {{/contains}}
+    {{#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}}
+
+  {{#ifEquals lType 'customwidget' this}}
+    evalDynamicProps() {
+      const _this = this.proxy;
+      {{#each dynamicProps}}
+      _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 'customwidget' this}}
+  renderCustomWidget() {
+  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>);
+  }
+}

package/src/templates/component/design-token.style.template

@@ -0,0 +1,8 @@
+{{#each styledefs}}
+
+{{this.className}} {
+    {{#each dtStyle}}
+    {{@key}}: {{this}};
+    {{/each}}
+}
+{{/each}}

package/src/templates/component/design-tokens-defaults.template

@@ -0,0 +1,12 @@
+:root[color="{{colorScheme}}"]  {
+    {{#each tokens}}
+    /*{{this.path}}*/
+    {{#each this.tokens}}
+    {{@key}}: {{this}};
+    {{/each}}
+
+
+
+
+    {{/each}}
+}

package/src/templates/component/script.template

@@ -0,0 +1,10 @@
+import moment from 'moment';
+import * as _ from 'lodash';
+
+export default function addPageScript(App, {{typeLabel}}) {
+  //auto refresh functions
+  const setTimeout = App.lib.setTimeout;
+  const setInterval = App.lib.setInterval;
+
+  {{{prependSpace script 2}}}
+}

package/src/templates/component/style-def.template

@@ -0,0 +1,19 @@
+@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}}../wavemaker/design-tokens/{{path}}');
+@import (optional) url('{{basePath}}../custom/components/{{path}}');
+@import (optional) url('{{basePath}}../custom/os/components/{{path}}');

package/src/templates/component/style.template

@@ -0,0 +1 @@
+export default {{{styles}}};

package/src/templates/device-operation-loader.template

@@ -0,0 +1,91 @@
+{{#each servicesConfig}}
+import { {{name}}Service } from "@wavemaker-ai/app-rn-runtime/runtime/services/device/{{filePath}}-service";
+{{/each}}
+
+{{#each pluginOperationConfig}}
+import { {{method}} } from "@wavemaker-ai/app-rn-runtime/variables/device/{{service}}/{{filename}}.operation";
+{{/each}}
+
+{{#each imports}}
+import {{name}} from "@wavemaker-ai/app-rn-runtime/runtime/services/{{filename}}";
+{{/each}}
+
+import { permissionService } from './device-permission-service';
+import OperationProvider from '@wavemaker-ai/app-rn-runtime/variables/device/operation.provider';
+{{#if contactsPlugin}}
+import { contactsPluginService } from './device-plugin-service';
+{{/if}}
+{{#if calendarPlugin}}
+import { calendarPluginService } from './device-plugin-service';
+{{/if}}
+{{#if locationPlugin}}
+import { locationPluginService } from './device-plugin-service';
+{{/if}}
+{{#if scanPlugin}}
+import { scanPluginService } from './device-plugin-service';
+{{/if}}
+{{#if fileUploadPlugin}}
+import { fileUploadPluginService } from './device-plugin-service';
+{{/if}}
+{{#if openFilePlugin}}
+import { openFilePluginService } from './device-plugin-service';
+{{/if}}
+
+{{#each servicesConfig}}
+const get{{name}}Service = () => {
+    return new {{name}}Service({{servicesStr}});
+}
+{{/each}}
+
+export const initialize = () => {
+    {{#each servicesConfig}}
+        const {{name}}Service = get{{name}}Service();
+    {{/each}}
+
+    const data = {'appVersion': '{{appVersion}}'};
+
+    {{#each pluginOperationConfig}}
+    {{#ifEquals method 'AppInfoOperation' this}}
+        OperationProvider.set('{{service}}.{{operation}}', new {{method}}(data));
+    {{else}}
+    {{#ifEquals hasparams true this}}
+        {{#ifEquals method 'GetContactsOperation' this}}
+        OperationProvider.set('{{service}}.{{operation}}', new {{method}}({{type}}Service, permissionService, contactsPluginService));
+        {{else}}
+        {{#ifEquals method 'CreateEventOperation' this}}
+        OperationProvider.set('{{service}}.{{operation}}', new {{method}}({{type}}Service, permissionService, calendarPluginService));
+        {{else}}
+        {{#ifEquals method 'GetEventsOperation' this}}
+        OperationProvider.set('{{service}}.{{operation}}', new {{method}}({{type}}Service, permissionService, calendarPluginService));
+        {{else}}
+        {{#ifEquals method 'DeleteEventOperation' this}}
+        OperationProvider.set('{{service}}.{{operation}}', new {{method}}({{type}}Service, permissionService, calendarPluginService));
+        {{else}}
+        {{#ifEquals method 'CurrentGeoPositionOperation' this}}
+        OperationProvider.set('{{service}}.{{operation}}', new {{method}}({{type}}Service, permissionService, locationPluginService));
+        {{else}}
+        {{#ifEquals method 'ScanOperation' this}}
+        OperationProvider.set('{{service}}.{{operation}}', new {{method}}({{type}}Service, permissionService, scanPluginService));
+        {{else}}
+        OperationProvider.set('{{service}}.{{operation}}', new {{method}}({{type}}Service, permissionService));
+        {{/ifEquals}}
+        {{/ifEquals}}
+        {{/ifEquals}}
+        {{/ifEquals}}
+        {{/ifEquals}}
+        {{/ifEquals}}
+    {{else}}
+    {{#ifEquals method 'UploadFileOperation' this}}
+    OperationProvider.set('{{service}}.{{operation}}', new {{method}}(fileUploadPluginService));
+    {{else}}
+    {{#ifEquals method 'OpenFileOperation' this}}
+    OperationProvider.set('{{service}}.{{operation}}', new {{method}}(openFilePluginService));
+    {{else}}
+    OperationProvider.set('{{service}}.{{operation}}', new {{method}}(permissionService));
+    {{/ifEquals}}
+    {{/ifEquals}}
+    {{/ifEquals}}
+    {{/ifEquals}}
+
+    {{/each}}
+}