rb-homer 1.6.13 → 1.6.15

package/index.js

@@ -419,8 +419,21 @@ function createTemplate(appNo, componentName, createWithinFolder, componenttype)
     if (componenttype === "rex2") {
         var configContent = fs.readFileSync(createPath + "config.js", 'utf8');
         configContent = configContent.replace("111111111", appNo);
-        configContent = configContent.replace("222222222", componentName);
+        configContent = configContent.replace("rexComponentNameHere", componentName);
         fs.writeFileSync(createPath + "config.js", configContent, 'utf8');
+
+        //Update component.ts to include web component name
+        var hyphenizedComponentName = componentName.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+        if (hyphenizedComponentName[0] === "-") {
+            hyphenizedComponentName = hyphenizedComponentName.slice(1);
+        }
+        var componentContent = fs.readFileSync(createPath + "rex-project/component.ts", 'utf8');
+        componentContent = componentContent.replace("rex-222222222", hyphenizedComponentName).replace(/rexComponentNameHere/g, componentName);
+        fs.writeFileSync(createPath + "rex-project/component.ts", componentContent, 'utf8');
+
+        var buildContent = fs.readFileSync(createPath + "build.js", 'utf8');
+        buildContent = buildContent.replace("rex-222222222", hyphenizedComponentName).replace(/rexComponentNameHere/g, componentName);
+        fs.writeFileSync(createPath + "build.js", buildContent, 'utf8');
         return;
     }
 

package/npm-shrinkwrap.json

@@ -1,11 +1,12 @@
 {
   "name": "rb-homer",
-  "version": "1.6.7-beta.0",
+  "version": "1.6.15",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.6.7-beta.0",
+      "name": "rb-homer",
+      "version": "1.6.15",
       "hasInstallScript": true,
       "license": "ISC",
       "dependencies": {
@@ -27,7 +28,7 @@
         "wcf.js": "0.0.x",
         "websocket": "1.0.x",
         "xml2js": "0.4.x",
-        "zip-dir": "^2.0.0"
+        "zip-dir": "2.0.x"
       },
       "bin": {
         "rb": "index.js"
@@ -73,9 +74,9 @@
       }
     },
     "node_modules/async": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.1.tgz",
-      "integrity": "sha512-XdD5lRO/87udXCMC9meWdYiR+Nq6ZjUfXidViUZGu2F1MO4T3XwZ1et0hb2++BgLfhyJwy44BGB/yx80ABx8hg=="
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -806,8 +807,9 @@
       }
     },
     "node_modules/nth-check": {
-      "version": "2.0.0",
-      "license": "BSD-2-Clause",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
       "dependencies": {
         "boolbase": "^1.0.0"
       },
@@ -1360,9 +1362,9 @@
       "version": "1.0.0"
     },
     "async": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.1.tgz",
-      "integrity": "sha512-XdD5lRO/87udXCMC9meWdYiR+Nq6ZjUfXidViUZGu2F1MO4T3XwZ1et0hb2++BgLfhyJwy44BGB/yx80ABx8hg=="
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
     },
     "asynckit": {
       "version": "0.4.0"
@@ -1832,7 +1834,9 @@
       "version": "3.0.0"
     },
     "nth-check": {
-      "version": "2.0.0",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
       "requires": {
         "boolbase": "^1.0.0"
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rb-homer",
-  "version": "1.6.13",
+  "version": "1.6.15",
   "description": "Create and synchronize Rambase applications.",
   "main": "index.js",
   "scripts": {
@@ -30,6 +30,6 @@
     "wcf.js": "0.0.x",
     "websocket": "1.0.x",
     "xml2js": "0.4.x",
-    "zip-dir": "1.0.x"
+    "zip-dir": "2.0.x"
   }
 }

package/src/extract.js

@@ -11,7 +11,7 @@ var noContext = '$$noContext';
 
 
 function mkAttrRegex(startDelim, endDelim, attribute) {
-    return /('|"|")([\w\sæøå!?.,():;-]{1,})\1\s*\|\s*translate/g;
+    return /('|"|")([\w\sæøå!?#=&+.,():;-]{1,})\1\s*\|\s*translate/g;
     /*
     var start = startDelim.replace(escapeRegex, '\\$&');
     var end = endDelim.replace(escapeRegex, '\\$&');

package/templates/rex2/build.js

@@ -0,0 +1,33 @@
+
+export default class rexComponentNameHere extends HTMLElement {
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+  }
+
+  name = "RamBase";
+
+  list = [{id:1},{id:2},{id:3}];
+
+  connectedCallback() {
+          
+    const template = document.createElement('template');
+    template.innerHTML = `
+      <div>Hello ${this.name}</div>
+      ${this.list.map(item => 
+        `<ul>
+          <li>ID: ${item.id} </li>
+        </ul>`
+      ).join("")}
+      `
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+  }
+
+  disconnectedCallback() {
+  }
+
+}
+customElements.define("rex-222222222", rexComponentNameHere);

package/templates/rex2/config.js

@@ -1,4 +1,4 @@
 config = {        
 	appNo: 111111111,
-	appName: "222222222"
+	appName: "rexComponentNameHere"
 };

package/templates/rex2/readme.md

@@ -1,20 +1,49 @@
-**Listen and sync file changes**
+## Required files ##
 
-rb rex2
+**build.js**
+This is the REX component which will be synced to RamBase. The build file has to be a web component.
 
+**config.js**
+Config file used to sync code to the correct REX component.
+
+**gitignore**
+Makes sure the node_modules folder are not be part of the commit.
 
-**rex-project folder**
 
+## Optional files ##
+
+**rex-project folder**
 Here you can npm install the frontend framework and node_modules you want to use.
-Files inside this folder will not be synced to RamBase.
 
+How to use it:
+1) cd into to rex-project folder 
+2) type "npm install"
+3) npm install a webcomponent library https://webcomponents.dev/ (optional)
+4) type "npm run watch" or "npm run build" to start the build process
 
-**build.js**
+Rollup should then compile the files to ../build.js. 
 
-This is the build file which will be synced to RamBase. The build file has to be a web component.
+NB: You don't have to use a build tool or you can use a different one than Rollup.
+The important thing to remember is to place all dev-files in the rex-project folder.
+Files in the rex-project folder will not be synced to RamBase.
 
 
-**gitignore**
+## Commands ##
+
+**Listen and sync file changes**
+rb rex2
+
+## Tips ##
+
+Install the vs code extension: es6-string-html
+This will give html and css syntax highlighting for template literals, ex:
+template.innerHTML = /*html*/`
+    <style>
+        #container {
+            color:white;
+        }
+    </style>
+`
+
 
-The node_modules folder will not be part of the commit.
 

package/templates/rex2/rex-project/component.ts

@@ -0,0 +1,34 @@
+import {version} from './test.json'
+
+export default class rexComponentNameHere extends HTMLElement {
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+  }
+
+  name = "RamBase";
+
+  list = [{id:1},{id:2},{id:3}];
+
+  connectedCallback() {
+          
+    const template = document.createElement('template');
+    template.innerHTML = `
+      <div>Hello ${this.name}</div>
+      <div>Version: ${version}</div>
+      ${this.list.map(item => 
+        `<ul>
+          <li>ID: ${item.id} </li>
+        </ul>`
+      ).join("")}
+      `
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+  }
+  disconnectedCallback() {
+  }
+}
+customElements.define("rex-222222222", rexComponentNameHere);
+

package/templates/rex2/rex-project/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "name",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "npx rollup --config rollup.config.js",
+    "watch": "npx rollup --config rollup.config.js --watch"
+  },
+  "devDependencies": {
+    "tslib": "^2.4.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "rollup": "^2.63.0",
+    "rollup-plugin-html": "^0.2.1"
+  }
+}

package/templates/rex2/rex-project/rollup.config.js

@@ -0,0 +1,21 @@
+import typescript from "@rollup/plugin-typescript"
+import resolve from '@rollup/plugin-node-resolve';
+import json from '@rollup/plugin-json';
+
+export default [
+    {
+        input: "component.ts",
+        output: {
+            file: "../build.js",
+            format: "esm"   
+            // sourcemap: true
+        },
+        plugins: [
+            typescript({
+                tsconfig: "./tsconfig.json"
+            }),
+            json(),
+            resolve()            
+        ]
+    }
+]

package/templates/rex2/rex-project/test.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="/build.js"></script>
+  </head>
+  <body>
+    <test-dette></test-dette>
+  </body>
+</html>

package/templates/rex2/rex-project/test.json

@@ -0,0 +1,3 @@
+{
+    "version": "REX2.0"
+}

package/templates/rex2/rex-project/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
+        "useDefineForClassFields": false,
+        "skipLibCheck": true,
+        "typeRoots": ["node/modules/@types/"],
+        "resolveJsonModule": true
+    }
+}

package/templates/rex2/rex-project/typings.ts

@@ -0,0 +1,4 @@
+// declare module "*.html" {
+//     const value: string;
+//     export default value;
+//   }