[DX-399] ES6 template

.gitignore

@@ -19,11 +19,10 @@ results
 .DS_Store
 .vscode
 
-_package*
+*_package*
 npm-debug.log
 node_modules
 package-lock.json
-yarn.lock
 coverage
 
 /mocks/handlebars-component/_compile-static-package6/

.prettierignore

@@ -0,0 +1 @@
+mocks/es6-component/broken.js

README.md

@@ -11,6 +11,7 @@ Base-templates & utilties for the [OpenComponents](https://github.com/opentable/
 
 | Type | Version |
 |--------|-------|
+| [`oc-template-es6`](/packages/oc-template-es6) | [![npm version](https://badge.fury.io/js/oc-template-es6.svg)](http://badge.fury.io/js/oc-template-es6) |
 | [`oc-template-handlebars`](/packages/oc-template-handlebars) | [![npm version](https://badge.fury.io/js/oc-template-handlebars.svg)](http://badge.fury.io/js/oc-template-handlebars) |
 | [`oc-template-jade`](/packages/oc-template-jade) | [![npm version](https://badge.fury.io/js/oc-template-jade.svg)](http://badge.fury.io/js/oc-template-jade) |
 

acceptance-components/base-component-es6/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "base-component-es6",
+  "description": "",
+  "version": "1.0.0",
+  "private": true,
+  "oc": {
+    "files": {
+      "data": "server.js",
+      "static": [
+        "img"
+      ],
+      "template": {
+        "src": "view.js",
+        "type": "oc-template-es6"
+      }
+    },
+    "parameters": {
+      "name": {
+        "default": "ES6 template",
+        "description": "Your name",
+        "example": "Jane Doe",
+        "mandatory": false,
+        "type": "string"
+      }
+    }
+  },
+  "devDependencies": {
+    "oc-template-es6-compiler": "file:../../packages/oc-template-es6-compiler"
+  }
+}

acceptance-components/base-component-es6/server.js

@@ -0,0 +1,9 @@
+export const data = (context, callback) => {
+  const { name } = context.params;
+  const { staticPath } = context;
+
+  callback(null, {
+    name,
+    staticPath
+  });
+};

acceptance-components/base-component-es6/styles.css

@@ -0,0 +1,4 @@
+.awesome {
+  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
+  background: palevioletred;
+}

acceptance-components/base-component-es6/view.js

@@ -0,0 +1,7 @@
+import styles from './styles.css';
+
+export default ({ name, staticPath }) =>
+  `<div id="base-component-es6" class=${styles.awesome}>
+    Hello ${name.toUpperCase()}!
+    <img src="${staticPath}img/logo.png" />
+  </div>`;

acceptance-components/base-component-handlebars/package.json

@@ -1,7 +1,7 @@
 {
   "name": "base-component-handlebars",
   "description": "",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "oc": {
     "files": {
@@ -25,6 +25,6 @@
     }
   },
   "devDependencies": {
-    "oc-template-handlebars-compiler": "6.2.0"
+    "oc-template-handlebars-compiler": "file:../../packages/oc-template-handlebars-compiler"
   }
 }

acceptance-components/base-component-jade/package.json

@@ -1,7 +1,7 @@
 {
   "name": "base-component-jade",
   "description": "",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "oc": {
     "files": {
@@ -25,6 +25,6 @@
     }
   },
   "devDependencies": {
-    "oc-template-jade-compiler": "6.2.0"
+    "oc-template-jade-compiler": "file:../../packages/oc-template-jade-compiler"
   }
 }

acceptance-setup/__tests__/__snapshots__/acceptance.js.snap

@@ -4,18 +4,22 @@ exports[`Registry should correctly serve rendered components 1`] = `"{\\"type\\"
 
 exports[`Registry should correctly serve rendered components 2`] = `"{\\"type\\":\\"oc-component-local\\",\\"version\\":\\"6.6.6\\",\\"requestVersion\\":\\"\\",\\"name\\":\\"base-component-jade\\",\\"renderMode\\":\\"rendered\\",\\"href\\":\\"http://localhost:3000/base-component-jade?name=SuperMario\\",\\"html\\":\\"<oc-component href=\\\\\\"http://localhost:3000/base-component-jade?name=SuperMario\\\\\\" data-hash=\\\\\\"22d3a7758703b799e94919367573341c5bdc5a4b\\\\\\" data-name=\\\\\\"base-component-jade\\\\\\" data-rendered=\\\\\\"true\\\\\\" data-version=\\\\\\"6.6.6\\\\\\"><div id=\\\\\\"base-component-jade\\\\\\"><img src=\\\\\\"http://localhost:3000/base-component-jade/6.6.6/static/img/logo.png\\\\\\"/><div>Hello SuperMario</div></div><script>window.oc=window.oc||{};oc.renderedComponents=oc.renderedComponents||{};oc.renderedComponents[\\\\\\"base-component-jade\\\\\\"]=\\\\\\"6.6.6\\\\\\";</script></oc-component>\\"}"`;
 
+exports[`Registry should correctly serve rendered components 3`] = `"{\\"type\\":\\"oc-component-local\\",\\"version\\":\\"6.6.6\\",\\"requestVersion\\":\\"\\",\\"name\\":\\"base-component-es6\\",\\"renderMode\\":\\"rendered\\",\\"href\\":\\"http://localhost:3000/base-component-es6?name=SuperMario\\",\\"html\\":\\"<oc-component href=\\\\\\"http://localhost:3000/base-component-es6?name=SuperMario\\\\\\" data-hash=\\\\\\"3eb89f113f7d54e4f00276f1b9d71fd1d9fe8777\\\\\\" data-name=\\\\\\"base-component-es6\\\\\\" data-rendered=\\\\\\"true\\\\\\" data-version=\\\\\\"6.6.6\\\\\\"><div id=\\\\\\"base-component-es6\\\\\\" class=awesome__2cThMnJY>\\\\n Hello SUPERMARIO!\\\\n <img src=\\\\\\"http://localhost:3000/base-component-es6/6.6.6/static/img/logo.png\\\\\\" />\\\\n </div><style>.awesome__2cThMnJY{font-family:\\\\\\"Hiragino Sans\\\\\\",\\\\\\"ヒラギノ角ゴシック\\\\\\",\\\\\\"Hiragino Kaku Gothic ProN\\\\\\",\\\\\\"ヒラギノ角ゴ ProN W3\\\\\\",Roboto,\\\\\\"Droid Sans\\\\\\",\\\\\\"游ゴシック\\\\\\",YuGothic,\\\\\\"メイリオ\\\\\\",Meiryo,sans-serif;background:#db7093}</style><script>window.oc = window.oc || {};oc.cmd = oc.cmd || [];oc.cmd.push(function(oc){oc.events.fire('oc:cssDidMount', '.awesome__2cThMnJY{font-family:\\\\\\"Hiragino Sans\\\\\\",\\\\\\"ヒラギノ角ゴシック\\\\\\",\\\\\\"Hiragino Kaku Gothic ProN\\\\\\",\\\\\\"ヒラギノ角ゴ ProN W3\\\\\\",Roboto,\\\\\\"Droid Sans\\\\\\",\\\\\\"游ゴシック\\\\\\",YuGothic,\\\\\\"メイリオ\\\\\\",Meiryo,sans-serif;background:#db7093}');});</script><script>window.oc=window.oc||{};oc.renderedComponents=oc.renderedComponents||{};oc.renderedComponents[\\\\\\"base-component-es6\\\\\\"]=\\\\\\"6.6.6\\\\\\";</script></oc-component>\\"}"`;
+
 exports[`Registry should correctly serve unrendered components 1`] = `"{\\"type\\":\\"oc-component-local\\",\\"version\\":\\"6.6.6\\",\\"requestVersion\\":\\"\\",\\"name\\":\\"base-component-handlebars\\",\\"renderMode\\":\\"unrendered\\",\\"href\\":\\"http://localhost:3000/base-component-handlebars?name=SuperMario\\",\\"data\\":{\\"name\\":\\"SuperMario\\",\\"staticPath\\":\\"http://localhost:3000/base-component-handlebars/6.6.6/static/\\"},\\"template\\":{\\"src\\":\\"http://localhost:3000/base-component-handlebars/6.6.6/static/template.js\\",\\"type\\":\\"oc-template-handlebars\\",\\"key\\":\\"963c14b7b43b1a4db3c6436de5f6d95543f63be7\\"}}"`;
 
 exports[`Registry should correctly serve unrendered components 2`] = `"{\\"type\\":\\"oc-component-local\\",\\"version\\":\\"6.6.6\\",\\"requestVersion\\":\\"\\",\\"name\\":\\"base-component-jade\\",\\"renderMode\\":\\"unrendered\\",\\"href\\":\\"http://localhost:3000/base-component-jade?name=SuperMario\\",\\"data\\":{\\"name\\":\\"SuperMario\\",\\"staticPath\\":\\"http://localhost:3000/base-component-jade/6.6.6/static/\\"},\\"template\\":{\\"src\\":\\"http://localhost:3000/base-component-jade/6.6.6/static/template.js\\",\\"type\\":\\"oc-template-jade\\",\\"key\\":\\"22d3a7758703b799e94919367573341c5bdc5a4b\\"}}"`;
 
+exports[`Registry should correctly serve unrendered components 3`] = `"{\\"type\\":\\"oc-component-local\\",\\"version\\":\\"6.6.6\\",\\"requestVersion\\":\\"\\",\\"name\\":\\"base-component-es6\\",\\"renderMode\\":\\"unrendered\\",\\"href\\":\\"http://localhost:3000/base-component-es6?name=SuperMario\\",\\"data\\":{\\"name\\":\\"SuperMario\\",\\"staticPath\\":\\"http://localhost:3000/base-component-es6/6.6.6/static/\\"},\\"template\\":{\\"src\\":\\"http://localhost:3000/base-component-es6/6.6.6/static/template.js\\",\\"type\\":\\"oc-template-es6\\",\\"key\\":\\"3eb89f113f7d54e4f00276f1b9d71fd1d9fe8777\\"}}"`;
+
 exports[`client-side-side rendering 1`] = `
 <div
   id="base-component-handlebars"
 >
 
 
   <img
-    src="http://localhost:3000/base-component-handlebars/1.0.1/static/img/logo.png"
+    src="http://localhost:3000/base-component-handlebars/1.0.2/static/img/logo.png"
   />
 
 
@@ -32,14 +36,30 @@ exports[`client-side-side rendering 2`] = `
   id="base-component-jade"
 >
   <img
-    src="http://localhost:3000/base-component-jade/1.0.1/static/img/logo.png"
+    src="http://localhost:3000/base-component-jade/1.0.2/static/img/logo.png"
   />
   <div>
     Hello SuperMario
   </div>
 </div>
 `;
 
+exports[`client-side-side rendering 3`] = `
+<div
+  class="awesome__2cThMnJY"
+  id="base-component-es6"
+>
+
+ Hello SUPERMARIO!
+
+  <img
+    src="http://localhost:3000/base-component-es6/1.0.0/static/img/logo.png"
+  />
+
+
+</div>
+`;
+
 exports[`server-side-side rendering 1`] = `
 "<!DOCTYPE html><html><head>
             <title>A page</title>
@@ -55,7 +75,7 @@ exports[`server-side-side rendering 1`] = `
           <script>window.oc = window.oc || {};
 oc.conf = oc.conf || {};
 oc.conf.templates = oc.conf.templates || [];
-oc.conf.templates = oc.conf.templates.concat([{\\"type\\":\\"oc-template-jade\\",\\"version\\":\\"6.6.6\\",\\"externals\\":[{\\"global\\":\\"jade\\",\\"url\\":\\"https://unpkg.com/jade-legacy@6.6.6/runtime.js\\",\\"name\\":\\"jade\\"}]},{\\"type\\":\\"oc-template-handlebars\\",\\"version\\":\\"6.6.6\\",\\"externals\\":[{\\"global\\":\\"Handlebars\\",\\"url\\":\\"https://unpkg.com/handlebars@6.6.6/dist/handlebars.runtime.min.js\\",\\"name\\":\\"handlebars\\"}]}]);</script><script src=\\"http://localhost:3000/oc-client/6.6.6/static/src/oc-client.min.js\\" type=\\"text/javascript\\"></script><script>window.oc=window.oc||{};oc.renderedComponents=oc.renderedComponents||{};oc.renderedComponents[\\"oc-client\\"]=\\"6.6.6\\";</script>
+oc.conf.templates = oc.conf.templates.concat([{\\"type\\":\\"oc-template-jade\\",\\"version\\":\\"6.6.6\\",\\"externals\\":[{\\"global\\":\\"jade\\",\\"url\\":\\"https://unpkg.com/jade-legacy@6.6.6/runtime.js\\",\\"name\\":\\"jade\\"}]},{\\"type\\":\\"oc-template-handlebars\\",\\"version\\":\\"6.6.6\\",\\"externals\\":[{\\"global\\":\\"Handlebars\\",\\"url\\":\\"https://unpkg.com/handlebars@6.6.6/dist/handlebars.runtime.min.js\\",\\"name\\":\\"handlebars\\"}]},{\\"type\\":\\"oc-template-es6\\",\\"version\\":\\"6.6.6\\",\\"externals\\":[]}]);</script><script src=\\"http://localhost:3000/oc-client/6.6.6/static/src/oc-client.min.js\\" type=\\"text/javascript\\"></script><script>window.oc=window.oc||{};oc.renderedComponents=oc.renderedComponents||{};oc.renderedComponents[\\"oc-client\\"]=\\"6.6.6\\";</script>
 
 
       </body></html>"

acceptance-setup/__tests__/acceptance.js

@@ -32,6 +32,11 @@ const components = [
       __dirname,
       '../../acceptance-components/base-component-jade'
     )
+  },
+  {
+    name: 'base-component-es6',
+    template: require('../../packages/oc-template-es6'),
+    path: path.join(__dirname, '../../acceptance-components/base-component-es6')
   }
 ];
 

acceptance-setup/package.json

@@ -1,7 +1,7 @@
 {
   "name": "acceptance-setup",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "devDependencies": {
     "fs-extra": "5.0.0",
     "request": "^2.83.0",

dependencies.yml

@@ -130,9 +130,23 @@ collectors:
   - type: js-npm
     versions: "Y.Y.Y"
 
+- type: js-npm
+  path: packages/oc-template-es6
+  actors:
+  # pull requests for updates to any version
+  - type: js-npm
+    versions: "Y.Y.Y"
+
+- type: js-npm
+  path: packages/oc-template-es6-compiler
+  actors:
+  # pull requests for updates to any version
+  - type: js-npm
+    versions: "Y.Y.Y"
+
 - type: js-npm
   path: acceptance-setup
   actors:
   # pull requests for updates to any version
   - type: js-npm
-    versions: "Y.Y.Y"
+    versions: "Y.Y.Y"

mocks/es6-component/broken.js

@@ -0,0 +1,2 @@
+export default ({ name }) =>
+  <div>Hello ${name.toUpperCase()}!</div>`;

mocks/es6-component/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "es6-component",
+  "description": "",
+  "version": "1.0.0",
+  "repository": "",
+  "oc": {
+    "files": {
+      "data": "server.js",
+      "template": {
+        "src": "view.js",
+        "type": "oc-template-es6"
+      }
+    }
+  },
+  "dependencies": {
+    "lodash": ""
+  },
+  "devDependencies": {
+    "oc-template-es6-compiler": ""
+  }
+}

mocks/es6-component/server.js

@@ -0,0 +1,5 @@
+const _ = require('lodash');
+
+export const data = (context, callback) => {
+  return callback(null, { name: 'es6' });
+};

mocks/es6-component/styles.css

@@ -0,0 +1,4 @@
+.awesome {
+  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
+  background: palevioletred;
+}

mocks/es6-component/view.js

@@ -0,0 +1,4 @@
+import styles from './styles.css';
+
+export default ({ name }) =>
+  `<div class=${styles.awesome}>Hello ${name.toUpperCase()}!</div>`;

package.json

@@ -8,7 +8,7 @@
     "lerna": "^2.4.0",
     "lint-staged": "7.0.0",
     "node-dir": "0.1.17",
-    "oc": "^0.42.24",
+    "oc": "^0.42.26",
     "prettier-eslint-cli": "^4.1.1"
   },
   "scripts": {

packages/oc-generic-template-renderer/lib/getInfo.js

@@ -1,9 +1,11 @@
 module.exports = packageJson => {
-  const externals = Object.keys(packageJson.externals).map(dep => {
-    const ext = packageJson.externals[dep];
-    ext.name = dep;
-    return ext;
-  });
+  const externals = packageJson.externals
+    ? Object.keys(packageJson.externals).map(dep => {
+      const ext = packageJson.externals[dep];
+      ext.name = dep;
+      return ext;
+    })
+    : [];
 
   return {
     type: packageJson.name,

packages/oc-generic-template-renderer/test/getInfo.test.js

@@ -1,20 +1,31 @@
 const getInfo = require('../lib/getInfo');
-const packageJson = {
-  name: 'oc-template-generic',
-  version: '1.0.0',
-  externals: {
-    'lib-one': {
-      global: 'LibOne',
-      url: 'https://cdn.com/lib-one/1.0.0/lib-one.min.js'
-    },
-    'lib-two': {
-      global: 'LibTwo',
-      url: 'https://cdn.com/lib-two/1.0.0/lib-two.min.js'
-    }
-  }
-};
 
 test('should return the correct info', () => {
+  const packageJson = {
+    name: 'oc-template-generic',
+    version: '1.0.0',
+    externals: {
+      'lib-one': {
+        global: 'LibOne',
+        url: 'https://cdn.com/lib-one/1.0.0/lib-one.min.js'
+      },
+      'lib-two': {
+        global: 'LibTwo',
+        url: 'https://cdn.com/lib-two/1.0.0/lib-two.min.js'
+      }
+    }
+  };
+
   const info = getInfo(packageJson);
   expect(info).toMatchSnapshot();
 });
+
+test('should return an an empty array if the template does not specify any externals', () => {
+  const packageJson = {
+    name: 'oc-template-generic',
+    version: '1.0.0'
+  };
+
+  const info = getInfo(packageJson);
+  expect(info.externals).toEqual([]);
+});

packages/oc-template-es6-compiler/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 OpenComponents community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/oc-template-es6-compiler/README.md

@@ -0,0 +1,3 @@
+# oc-template-es6-compiler - Compiler module
+
+OC template to compile components of type `oc-template-es6`

packages/oc-template-es6-compiler/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const compile = require('./lib/compile');
+const template = require('oc-template-es6');
+
+module.exports = {
+  compile,
+  getInfo: template.getInfo,
+  getCompiledTemplate: template.getCompiledTemplate,
+  render: template.render
+};