Merge pull request #3 from ara-framework/develop

Version 3.0

.circleci/config.yml

@@ -0,0 +1,74 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:10.16
+
+    working_directory: ~/hypernova-vue
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      # run linter
+      - run: yarn lint
+
+      # run tests
+      - run: yarn test
+
+  publish:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:10.16
+
+    working_directory: ~/hypernova-vue
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      # run linter
+      - run: yarn semantic-release -d
+
+workflows:
+  version: 2
+  main:
+    jobs:
+    - build
+    - publish:
+        requires:
+            - build
+        filters:
+          branches:
+            only: master

.eslintignore

@@ -0,0 +1,2 @@
+lib
+node_modules

.eslintrc

@@ -1,5 +1,11 @@
 {
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true
+  },
   "extends": [
+    "plugin:@typescript-eslint/recommended",
     "airbnb-base"
   ],
   "rules": {

jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

package.json

@@ -1,13 +1,15 @@
 {
   "name": "hypernova-vue",
-  "version": "2.1.0",
+  "version": "3.0.0-alpha.0",
   "description": "Vue bindings for Hypernova",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "author": "Felipe Guizar Diaz <felipegaiacharly@gmail.com>",
   "scripts": {
-    "prepublish": "npm run build",
-    "lint": "eslint src",
-    "build": "babel src -d lib"
+    "lint": "eslint src/**/*.ts",
+    "build": "tsc",
+    "test": "jest",
+    "semantic-release": "semantic-release"
   },
   "keywords": [
     "vuew",
@@ -18,16 +20,21 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git@github.com:marconi1992/hypernova-vue.git"
+    "url": "https://github.com/ara-framework/hypernova-vue.git"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/runtime": "^7.5.5",
-    "babel-preset-airbnb": "^4.0.1",
-    "eslint": "^5.14.1",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.16.0"
+    "@babel/runtime": "^7.6.0",
+    "@types/jest": "^24.0.18",
+    "@types/node": "^12.7.4",
+    "@typescript-eslint/eslint-plugin": "^2.1.0",
+    "@typescript-eslint/parser": "^2.1.0",
+    "eslint": "^6.3.0",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "jest": "^24.9.0",
+    "ts-jest": "^24.0.2",
+    "typescript": "^3.6.0",
+    "semantic-release": "^15.13.24"
   },
   "dependencies": {
     "hypernova": "^2.5.0",

server.js

@@ -0,0 +1 @@
+module.exports = require('./lib/server.js');

src/__test__/index.spec.ts

@@ -0,0 +1,120 @@
+import Vue, { VNode } from 'vue';
+import {
+  loadById,
+  mountComponent,
+  renderInPlaceholder,
+  renderVue,
+} from '..';
+
+describe('loadById', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should load payload by id', () => {
+    document.body.innerHTML = `
+      <div data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"></div>
+      <script type="application/json" data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"><!--{"title":"Ara Framework"}--></script>
+    `;
+
+    const payload = loadById('Example', 'd0a0b082-dad0-4bf2-ae4f-08eff16575b4');
+
+    const { node, data } = payload;
+
+    expect(node.getAttribute('data-hypernova-key')).toEqual('Example');
+    expect(node.getAttribute('data-hypernova-id')).toEqual('d0a0b082-dad0-4bf2-ae4f-08eff16575b4');
+    expect(data).toEqual({
+      title: 'Ara Framework',
+    });
+  });
+
+  test('should not load payload by id', () => {
+    const payload = loadById('Example', 'd0a0b082-dad0-4bf2-ae4f-08eff16575b4');
+
+    expect(payload).toBeNull();
+  });
+});
+
+describe('mountComponent', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should mount component correctly', () => {
+    document.body.innerHTML = '<div id="app"><div>';
+
+    const app = Vue.extend({
+      props: ['title'],
+      render(h): VNode {
+        return h('h1', {}, this.title);
+      },
+    });
+
+    const node = document.getElementById('app');
+
+    mountComponent(app, node, { title: 'Ara Framework' });
+
+    expect(node.innerHTML).toEqual('<h1>Ara Framework</h1>');
+  });
+});
+
+describe('renderInPlaceholder', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should render component in placeholder correctly', () => {
+    document.body.innerHTML = `
+      <div data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"></div>
+      <script type="application/json" data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"><!--{"title":"Ara Framework"}--></script>
+    `;
+
+    const app = Vue.extend({
+      props: ['title'],
+      render(h): VNode {
+        return h('h1', {}, this.title);
+      },
+    });
+
+    renderInPlaceholder('Example', app, 'd0a0b082-dad0-4bf2-ae4f-08eff16575b4');
+
+    const expectedHTML = `
+      <div data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"><h1>Ara Framework</h1></div>
+      <script type="application/json" data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"><!--{"title":"Ara Framework"}--></script>
+    `;
+    expect(document.body.innerHTML).toEqual(expectedHTML);
+  });
+});
+
+describe('renderVue', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('should render all the components in the body', () => {
+    document.body.innerHTML = `
+      <div data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"></div>
+      <script type="application/json" data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"><!--{"title":"Ara Framework"}--></script>
+      <div data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b5"></div>
+      <script type="application/json" data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b5"><!--{"title":"Ara Framework 2"}--></script>
+    `;
+
+    const app = Vue.extend({
+      props: ['title'],
+      render(h): VNode {
+        return h('h1', {}, this.title);
+      },
+    });
+
+    renderVue('Example', app);
+
+    const expectedHTML = `
+      <div data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"><h1>Ara Framework</h1></div>
+      <script type="application/json" data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b4"><!--{"title":"Ara Framework"}--></script>
+      <div data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b5"><h1>Ara Framework 2</h1></div>
+      <script type="application/json" data-hypernova-key="Example" data-hypernova-id="d0a0b082-dad0-4bf2-ae4f-08eff16575b5"><!--{"title":"Ara Framework 2"}--></script>
+    `;
+
+    expect(document.body.innerHTML).toEqual(expectedHTML);
+  });
+});