Skip to content

Commit

Permalink
Merge pull request #252 from opencomponents/es6-template
Browse files Browse the repository at this point in the history
[DX-399] ES6 template
  • Loading branch information
matteofigus committed Mar 5, 2018
2 parents 122b200 + 229df9d commit b01c11e
Show file tree
Hide file tree
Showing 58 changed files with 8,918 additions and 31 deletions.
3 changes: 1 addition & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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/
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
mocks/es6-component/broken.js
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions acceptance-components/base-component-es6/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
9 changes: 9 additions & 0 deletions acceptance-components/base-component-es6/server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export const data = (context, callback) => {
const { name } = context.params;
const { staticPath } = context;

callback(null, {
name,
staticPath
});
};
4 changes: 4 additions & 0 deletions acceptance-components/base-component-es6/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.awesome {
font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
background: palevioletred;
}
7 changes: 7 additions & 0 deletions acceptance-components/base-component-es6/view.js
Original file line number Diff line number Diff line change
@@ -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>`;
Binary file modified acceptance-components/base-component-handlebars/img/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions acceptance-components/base-component-handlebars/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "base-component-handlebars",
"description": "",
"version": "1.0.1",
"version": "1.0.2",
"private": true,
"oc": {
"files": {
Expand All @@ -25,6 +25,6 @@
}
},
"devDependencies": {
"oc-template-handlebars-compiler": "6.2.0"
"oc-template-handlebars-compiler": "file:../../packages/oc-template-handlebars-compiler"
}
}
Binary file modified acceptance-components/base-component-jade/img/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions acceptance-components/base-component-jade/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "base-component-jade",
"description": "",
"version": "1.0.1",
"version": "1.0.2",
"private": true,
"oc": {
"files": {
Expand All @@ -25,6 +25,6 @@
}
},
"devDependencies": {
"oc-template-jade-compiler": "6.2.0"
"oc-template-jade-compiler": "file:../../packages/oc-template-jade-compiler"
}
}
26 changes: 23 additions & 3 deletions acceptance-setup/__tests__/__snapshots__/acceptance.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand All @@ -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>
Expand All @@ -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>"
Expand Down
5 changes: 5 additions & 0 deletions acceptance-setup/__tests__/acceptance.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
}
];

Expand Down
2 changes: 1 addition & 1 deletion acceptance-setup/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
16 changes: 15 additions & 1 deletion dependencies.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
2 changes: 2 additions & 0 deletions mocks/es6-component/broken.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export default ({ name }) =>
<div>Hello ${name.toUpperCase()}!</div>`;
21 changes: 21 additions & 0 deletions mocks/es6-component/package.json
Original file line number Diff line number Diff line change
@@ -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": ""
}
}
5 changes: 5 additions & 0 deletions mocks/es6-component/server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const _ = require('lodash');

export const data = (context, callback) => {
return callback(null, { name: 'es6' });
};
4 changes: 4 additions & 0 deletions mocks/es6-component/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.awesome {
font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
background: palevioletred;
}
4 changes: 4 additions & 0 deletions mocks/es6-component/view.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import styles from './styles.css';

export default ({ name }) =>
`<div class=${styles.awesome}>Hello ${name.toUpperCase()}!</div>`;
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
12 changes: 7 additions & 5 deletions packages/oc-generic-template-renderer/lib/getInfo.js
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
39 changes: 25 additions & 14 deletions packages/oc-generic-template-renderer/test/getInfo.test.js
Original file line number Diff line number Diff line change
@@ -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([]);
});
21 changes: 21 additions & 0 deletions packages/oc-template-es6-compiler/LICENSE
Original file line number Diff line number Diff line change
@@ -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.
3 changes: 3 additions & 0 deletions packages/oc-template-es6-compiler/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# oc-template-es6-compiler - Compiler module

OC template to compile components of type `oc-template-es6`
11 changes: 11 additions & 0 deletions packages/oc-template-es6-compiler/index.js
Original file line number Diff line number Diff line change
@@ -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
};
Loading

0 comments on commit b01c11e

Please sign in to comment.