- chore: use a Webpack loader to precompile templates at build time

- chore: indented templates - chore: changed method parameters to `camelCase`
AR-js-org · Mar 20, 2020 · 21d805c · 21d805c
1 parent 2f22d9c
commit 21d805c
Show file tree

Hide file tree

Showing 13 changed files with 2,278 additions and 693 deletions.
diff --git a/dist/arjs-studio-backend.js b/dist/arjs-studio-backend.js
diff --git a/dist/arjs-studio-backend.js.map b/dist/arjs-studio-backend.js.map
diff --git a/dist/arjs-studio-backend.min.js b/dist/arjs-studio-backend.min.js
diff --git a/dist/arjs-studio-backend.min.js.map b/dist/arjs-studio-backend.min.js.map
diff --git a/package.json b/package.json
@@ -27,6 +27,8 @@
     "eslint-plugin-mocha": "^6.2.2",
     "eslint-plugin-mocha-no-only": "^1.1.0",
     "esm": "^3.2.25",
+    "handlebars": "^4.7.3",
+    "handlebars-loader": "^1.7.1",
     "mocha": "^6.2.2",
     "terser-webpack-plugin": "^2.3.4",
     "webpack": "^4.38.0",
@@ -35,8 +37,6 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@octokit/rest": "^16.38.2",
-    "file-saver": "^2.0.2",
-    "handlebars": "^4.7.3",
     "jszip": "^3.2.2",
     "regenerator-runtime": "^0.13.3"
   }

diff --git a/src/modules/location/index.js b/src/modules/location/index.js
@@ -1,17 +1,11 @@
-import Handlebars from 'handlebars';
+import template from './locationBased.handlebars';
 
 export class LocationModule {
-
-    generateHtml(asset_src, longitude, latitude, path = 'index.html') {
-        const html = Handlebars.templates.locationBased({
-            asset_src,
+    static generateHtml(longitude, latitude, assetSrc) {
+        return template({
             longitude,
             latitude,
+            assetSrc,
         });
-
-        return {
-            path,
-            content: html,
-        };
     }
 }
diff --git a/src/modules/location/locationBased.handlebars b/src/modules/location/locationBased.handlebars
@@ -1,24 +1,31 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-    <meta charset='utf-8'>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
-    <script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
-    <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
-    <script>
-        THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
-    </script>
-</head>
+    <head>
+        <meta charset='utf-8'>
+        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+        <script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
+        <script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
+        <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
+        <script>
+            THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
+        </script>
+    </head>
 
-<body style='margin: 0; overflow: hidden;'>
-<a-scene
-        vr-mode-ui="enabled: false"
-        embedded
-        arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
+    <body style='margin: 0; overflow: hidden;'>
+        <a-scene
+            vr-mode-ui="enabled: false"
+            embedded
+            arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'
+        >
+            <a-entity
+                gltf-model="{{assetSrc}}"
+                rotation="0 180 0"
+                scale="1 1 1"
+                gps-entity-place="longitude: {{longitude}}; latitude: {{latitude}};"
+                animation-mixer
+            ></a-entity>
 
-    <a-entity gltf-model="{{asset_src}}" rotation="0 180 0" scale="1 1 1" gps-entity-place="longitude: {{longitude}}; latitude: {{latitude}};" animation-mixer/>
-
-    <a-camera gps-camera rotation-reader></a-camera>
-</a-scene>
-</body>
+            <a-camera gps-camera rotation-reader></a-camera>
+        </a-scene>
+    </body>
+</html>
diff --git a/src/modules/location/locationBased.precompiled.js b/src/modules/location/locationBased.precompiled.js
diff --git a/src/modules/marker/index.js b/src/modules/marker/index.js
@@ -1,10 +1,10 @@
 import { BarcodeMarkerGenerator } from './tools/barcode-marker-generator';
 import { PatternMarkerGenerator } from './tools/pattern-marker-generator';
-import Handlebars from 'handlebars';
+import template from './markerBased.handlebars';
 
 export class MarkerModule {
-    static getBarcodeMarkerSVGDataURI(matrixTypeId, value) {
-        return new BarcodeMarkerGenerator(matrixTypeId, value).asSVGDataURI();
+    static getBarcodeMarkerSVGDataURI(matrixType, value) {
+        return new BarcodeMarkerGenerator(matrixType, value).asSVGDataURI();
     }
 
     static async getMarkerPattern(dataURI) {
@@ -15,15 +15,11 @@ export class MarkerModule {
         return await new PatternMarkerGenerator(dataURI).toFullMarker(ratio, size, color);
     }
 
-    generateHtml(matrix_code_type, marker_value, asset_src, path = 'index.html') {
-        const html  = Handlebars.templates.markerBased({
-            matrix_code_type,
-            asset_src,
-            marker_value});
-
-        return {
-            path,
-            content: html,
-        };
+    static generateHtml(matrixType, markerValue, assetSrc) {
+        return template({
+            matrixType,
+            markerValue,
+            assetSrc,
+        });
     }
 }
diff --git a/src/modules/marker/markerBased.handlebars b/src/modules/marker/markerBased.handlebars
@@ -1,29 +1,39 @@
-<!doctype HTML>
+<!doctype html>
 <html>
-<head>
-    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-</head>
-<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
-<script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
-<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
+    <head>
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    </head>
 
-<body style='margin : 0px; overflow: hidden;'>
-<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
-<a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: {{matrix_code_type}};">
+    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
+    <script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
+    <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
 
-    <a-assets>
-        <a-asset-item id="animated-asset" src="{{asset_src}}"></a-asset-item>
-    </a-assets>
+    <body style='margin : 0px; overflow: hidden;'>
+        <a-scene
+            embedded
+            vr-mode-ui="enabled: false"
+            arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: {{matrixType}};"
+        >
+            <a-assets>
+                <a-asset-item
+                    id="animated-asset"
+                    src="{{assetSrc}}"
+                ></a-asset-item>
+            </a-assets>
 
-    <a-marker id="animated-marker" type='barcode' value='{{marker_value}}'>
-        <a-entity
-                animation-mixer
-                gltf-model="#animated-asset"
-                scale="2 2 2">
-        </a-entity>
-    </a-marker>
+            <a-marker
+                id="animated-marker"
+                type="barcode"
+                value="{{markerValue}}"
+            >
+                <a-entity
+                    animation-mixer
+                    gltf-model="#animated-asset"
+                    scale="2 2 2"
+                ></a-entity>
+            </a-marker>
 
-    <a-entity camera></a-entity>
-</a-scene>
-</body>
-</html>
+            <a-entity camera></a-entity>
+        </a-scene>
+    </body>
+</html>
diff --git a/src/modules/marker/markerBased.precompiled.js b/src/modules/marker/markerBased.precompiled.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -58,6 +58,10 @@ module.exports = function(env) {
                         },
                     },
                 },
+                {
+                    test: /\.handlebars$/,
+                    loader: 'handlebars-loader',
+                },
             ],
         },
 

diff --git a/yarn.lock b/yarn.lock
@@ -1128,6 +1128,11 @@ async-each@^1.0.1:
   resolved "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
+async@~0.2.10:
+  version "0.2.10"
+  resolved "https://registry.npmjs.org/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
+  integrity sha1-trvgsGdLnXGXCMo43owjfLUmw9E=
+
 atob-lite@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/atob-lite/-/atob-lite-2.0.0.tgz#0fef5ad46f1bd7a8502c65727f0367d5ee43d696"
@@ -1195,6 +1200,11 @@ before-after-hook@^2.0.0:
   resolved "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.1.0.tgz#b6c03487f44e24200dd30ca5e6a1979c5d2fb635"
   integrity sha512-IWIbu7pMqyw3EAJHzzHbWa85b6oud/yfKYg5rqB5hNE8CeMi3nX+2C2sj0HswfblST86hpVEOAb9x34NZd6P7A==
 
+big.js@^3.1.3:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
+  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -2161,6 +2171,11 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fastparse@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
@@ -2180,11 +2195,6 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
-file-saver@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a"
-  integrity sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==
-
 [email protected]:
   version "1.0.0"
   resolved "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -2456,6 +2466,16 @@ [email protected]:
   resolved "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
   integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
 
+handlebars-loader@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.npmjs.org/handlebars-loader/-/handlebars-loader-1.7.1.tgz#07088f09d8a559344908f7c88c68c0ffdacc555d"
+  integrity sha512-Q+Z/hDPQzU8ZTlVnAe/0T1LHABlyhL7opNcSKcQDhmUXK2ByGTqib1Z2Tfv4Ic50WqDcLFWQcOb3mhjcBRbscQ==
+  dependencies:
+    async "~0.2.10"
+    fastparse "^1.0.0"
+    loader-utils "1.0.x"
+    object-assign "^4.1.0"
+
 handlebars@^4.7.3:
   version "4.7.3"
   resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.7.3.tgz#8ece2797826886cf8082d1726ff21d2a022550ee"
@@ -2926,6 +2946,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
+json5@^0.5.0:
+  version "0.5.1"
+  resolved "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -3013,6 +3038,15 @@ loader-runner@^2.4.0:
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
+[email protected]:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.0.4.tgz#13f56197f1523a305891248b4c7244540848426c"
+  integrity sha1-E/Vhl/FSOjBYkSSLTHJEVAhIQmw=
+  dependencies:
+    big.js "^3.1.3"
+    emojis-list "^2.0.0"
+    json5 "^0.5.0"
+
 [email protected], loader-utils@^1.0.2, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
@@ -3450,7 +3484,7 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-object-assign@^4.1.1:
+object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,6 +58,10 @@ module.exports = function(env) { @@
                             },
                         },
                     },
+                    {
+                        test: /\.handlebars$/,
+                        loader: 'handlebars-loader',
+                    },
                 ],
             },
@@ Expand Down @@