Skip to content

Commit c43d951

Browse files
fahrradfluchtfahrradflucht
committed
feat: setup example
0 parents  commit c43d951

14 files changed

+4158
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
dist

‎README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Feature Hub vue.js Example
2+
3+
A hello world example on how to integrate a Feature App developed with vue.js
4+
into a [Feature Hub](https://feature-hub.io) application using the
5+
[DOM integrator](https://www.npmjs.com/package/@feature-hub/dom).
6+
7+
## Run
8+
9+
```sh
10+
yarn serve
11+
```
12+
13+
Open [http://localhost:5000/public/](http://localhost:5000/public/) in your
14+
browser.

‎feature-app.webpack.config.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// @ts-check
2+
3+
const path = require('path');
4+
const webpack = require('webpack');
5+
const {VueLoaderPlugin} = require('vue-loader');
6+
7+
/**
8+
* @type {webpack.Configuration}
9+
*/
10+
module.exports = {
11+
devtool: false,
12+
mode: 'production',
13+
entry: path.join(__dirname, 'src/feature-app/index.ts'),
14+
output: {
15+
libraryTarget: 'amd',
16+
filename: './build/feature-app.js'
17+
},
18+
module: {
19+
rules: [
20+
{
21+
test: /\.ts$/,
22+
use: 'ts-loader'
23+
},
24+
{
25+
test: /\.vue$/,
26+
use: [
27+
{
28+
loader: 'vue-loader',
29+
options: {shadowMode: true}
30+
}
31+
]
32+
},
33+
{
34+
test: /\.css$/,
35+
use: [
36+
{loader: 'vue-style-loader', options: {shadowMode: true}},
37+
'css-loader'
38+
]
39+
}
40+
]
41+
},
42+
plugins: [new VueLoaderPlugin()],
43+
resolve: {
44+
extensions: ['.js', '.json', '.ts', '.tsx', '.vue']
45+
}
46+
};

‎integrator.webpack.config.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// @ts-check
2+
3+
const path = require('path');
4+
const webpack = require('webpack');
5+
6+
/**
7+
* @type {webpack.Configuration}
8+
*/
9+
module.exports = {
10+
devtool: false,
11+
mode: 'development',
12+
entry: path.join(__dirname, 'src/integrator/index.ts'),
13+
output: {
14+
filename: './build/integrator.js'
15+
},
16+
module: {
17+
rules: [
18+
{
19+
test: /\.ts$/,
20+
use: 'ts-loader'
21+
}
22+
]
23+
}
24+
};

‎package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "feature-hub-vue",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"scripts": {
7+
"build": "yarn build:feature-app && yarn build:integrator",
8+
"build:feature-app": "webpack --config feature-app.webpack.config.js",
9+
"build:integrator": "webpack --config integrator.webpack.config.js",
10+
"format": "prettier --write '**/*.{js,json,md,ts,tsx,vue,yml}'",
11+
"lint": "tslint --config tslint.json --project tsconfig.json --format verbose"
12+
},
13+
"dependencies": {
14+
"@feature-hub/core": "^1.3.0",
15+
"@feature-hub/dom": "^1.3.0",
16+
"@feature-hub/module-loader-amd": "^1.3.0",
17+
"vue": "^2.6.10"
18+
},
19+
"devDependencies": {
20+
"@types/webpack": "^4.4.26",
21+
"css-loader": "^2.1.1",
22+
"serve": "^10.1.2",
23+
"ts-config": "^20.9.0",
24+
"ts-loader": "^5.3.3",
25+
"tslint": "^5.14.0",
26+
"typescript": "^3.3.4000",
27+
"vue-loader": "^15.7.0",
28+
"vue-style-loader": "^4.1.2",
29+
"vue-template-compiler": "^2.6.10",
30+
"webpack": "^4.29.6",
31+
"webpack-cli": "^3.3.0"
32+
}
33+
}

‎prettier.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// @ts-check
2+
3+
module.exports = {
4+
bracketSpacing: false,
5+
proseWrap: 'always',
6+
singleQuote: true
7+
};

‎public/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Feature Hub Vue</title>
8+
<style>
9+
div[slot="error"] {
10+
display: none;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<feature-app-loader src="../dist/build/feature-app.js">
16+
<div slot="loading">
17+
Loading...
18+
</div>
19+
<div slot="error">
20+
Sorry. We Messed Up.
21+
</div>
22+
</feature-app-loader>
23+
24+
<script src="../dist/build/integrator.js"></script>
25+
26+
<style>
27+
div[slot="error"] {
28+
display: initial;
29+
}
30+
</style>
31+
</body>
32+
</html>

‎src/feature-app/App.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<p>Hello {{ name }}!</p>
3+
</template>
4+
5+
<script>
6+
export default {
7+
data: function() {
8+
return {
9+
name: this.$vnode.data.props['name']
10+
};
11+
}
12+
};
13+
</script>
14+
15+
<style scoped>
16+
p {
17+
font-size: 2em;
18+
text-align: center;
19+
}
20+
</style>

‎src/feature-app/index.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {FeatureAppDefinition} from '@feature-hub/core';
2+
import {DomFeatureApp} from '@feature-hub/dom';
3+
import Vue, {CreateElement, VNode} from 'vue';
4+
import {ThisTypedComponentOptionsWithArrayProps} from 'vue/types/options';
5+
6+
import App from './App.vue';
7+
8+
export interface InstanceConfig {
9+
name: string;
10+
}
11+
12+
const featureAppDefinition: FeatureAppDefinition<DomFeatureApp> = {
13+
id: 'test:hello-world',
14+
15+
create: env => ({
16+
attachTo(el: HTMLElement): void {
17+
new Vue({
18+
el,
19+
shadowRoot: el.getRootNode(),
20+
render(h: CreateElement): VNode {
21+
return h(App, {props: env.instanceConfig as InstanceConfig});
22+
}
23+
} as ThisTypedComponentOptionsWithArrayProps<Vue, {}, {}, {}, never>);
24+
}
25+
})
26+
};
27+
28+
export default featureAppDefinition;

‎src/feature-app/shims-vue.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.vue' {
2+
import Vue from 'vue';
3+
export default Vue;
4+
}

‎src/integrator/index.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import {createFeatureHub} from '@feature-hub/core';
2+
import {
3+
FeatureAppLoaderElement,
4+
defineFeatureAppLoader
5+
} from '@feature-hub/dom';
6+
import {loadAmdModule} from '@feature-hub/module-loader-amd';
7+
8+
declare global {
9+
interface HTMLElementTagNameMap {
10+
'feature-app-loader': FeatureAppLoaderElement;
11+
}
12+
}
13+
14+
const {featureAppManager} = createFeatureHub('test:integrator', {
15+
moduleLoader: loadAmdModule
16+
});
17+
18+
defineFeatureAppLoader(featureAppManager);
19+
20+
const featureAppLoader = document
21+
.getElementsByTagName('feature-app-loader')
22+
.item(0);
23+
24+
if (featureAppLoader) {
25+
featureAppLoader.instanceConfig = {
26+
name: 'Feature Hub'
27+
};
28+
}

‎tsconfig.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"include": ["src/**/*.ts", "src/**/*.tsx", "typings/**/*.d.ts"],
3+
"compilerOptions": {
4+
"target": "ES2017",
5+
"module": "commonjs",
6+
"moduleResolution": "node",
7+
"declaration": false,
8+
"sourceMap": true,
9+
"strict": true,
10+
"noUnusedLocals": true,
11+
"noUnusedParameters": true,
12+
"noImplicitReturns": true,
13+
"noFallthroughCasesInSwitch": true,
14+
"forceConsistentCasingInFileNames": true,
15+
"esModuleInterop": true,
16+
"outDir": "lib/",
17+
"lib": ["es2017", "dom"]
18+
}
19+
}

‎tslint.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "ts-config",
3+
"linterOptions": {"exclude": ["**/lib/**", "**/node_modules/**"]},
4+
"rules": {
5+
"no-unused-expression": false,
6+
"no-default-export": false
7+
}
8+
}

0 commit comments

Comments
 (0)