first solution done

examples/react/.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+ELF_APP__ENV=development

examples/react/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+.cache
+node_modules/
+/dist/
+npm-debug.log*
+lerna-debug.log
+yarn-debug.log*
+yarn-error.log*
+report
+coverage
+dist
+lib
+package-lock.json
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

examples/react/babel.config.js

@@ -0,0 +1,13 @@
+
+module.exports = {
+  presets: [
+    '@babel/preset-react',
+    [
+      '@babel/env',
+      {
+        useBuiltIns: 'usage',
+        corejs: 2
+      }
+    ]
+  ]
+}

examples/react/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "rate",
+  "description": "rate component",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "start": "elf-scripts build",
+    "umd": "elf-scripts umd",
+    "iife": "elf-scripts iife",
+    "serve": "elf-scripts serve"
+  },
+  "dependencies": {
+    "core-js": "^2.6.9",
+    "react": "^16.10.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-react": "^7.6.3"
+  }
+}

examples/react/src/index.js

@@ -0,0 +1,4 @@
+import Rate from './rate';
+import './style.scss';
+
+export default Rate;

examples/react/src/rate.js

@@ -0,0 +1,18 @@
+import { Component } from 'react'
+
+class Rate extends Component {
+  constructor() {
+    super()
+    this.state = {
+      msg: 'hi'
+    }
+  }
+
+  render () {
+    return (
+      <div className="rate">{this.state.msg}</div>
+    )
+  }
+}
+
+export default Rate

examples/react/src/style.scss

@@ -0,0 +1,76 @@
+
+@font-face {
+  font-family: "grate";
+  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAR0AAsAAAAABzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY+VUpcY21hcAAAAYAAAABXAAABhnGv1IxnbHlmAAAB2AAAAK8AAAEUwi/5HmhlYWQAAAKIAAAALAAAADYSdy7IaGhlYQAAArQAAAAcAAAAJAfeA4RobXR4AAAC0AAAAAwAAAAMDAAAAGxvY2EAAALcAAAACAAAAAgATgCKbWF4cAAAAuQAAAAeAAAAIAEPADluYW1lAAADBAAAAUUAAAJtPlT+fXBvc3QAAARMAAAAJwAAADo9U12GeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye33+Rxdzwv4EhhrmBoQEozAiSAwD3jA0veJztkLERgDAMA99OSMExCAUDUTEAS1OSLYLiwBbo7q2z7ErABCSxiQx2YHTtSi3yxBx5jp8iN/y+6tkafC6ZbiXcNQq/lpjru3lva9CbrecAfwDu5xJ2AHicY2BiAALmlcz2DEoMOgwMjPqMaupqbPxMbOxsYvKM7Gzicoz2jOJi5nZAGXMzczM1VnF1dnN1e0Z5Ruaef4WsXDwS7IX/uNm5GDl36DCysknyPH7MxcXHx6izg52Jif/ff5W9e1VmXomLu8Ikr/qMi4WNg+eZKhM7lxTX5r9cXDzsbOXlrIzMorx/N3Nw84qev5ScfGmq/P798iBnMSK5jQiXEeMeYhwBACs6NOIAeJxjYGRgYADii+olZ+L5bb4ycLMwgMD1NaVuyDQLA7M9kOJgYALxABk6CLV4nGNgZGBgbvjfwBDDwgACQJKRARUwAwBHCQJsBAAAAAQAAAAEAAAAAAAAAABOAIp4nGNgZGBgYGbQZWBiAAEQyQWEDAz/wXwGAA0uAUkAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJmRiZGZkYWBpbgksYgTROimZebkMDAAADayBXEA") format("woff"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+}
+
+[class^="g-icon"] {
+
+  display: inline-block;
+  font-family: "grate";
+  font-style: normal;
+  line-height: 1;
+  text-align: center;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  vertical-align: baseline;
+  -webkit-font-smoothing: antialiased;
+}
+
+.g-icon-star:before { content: "\e7df"; }
+
+.g-icon-star-fill:before { content: "\e86a"; }
+
+.g-rate {
+  font-size: 0;
+  line-height: 1;
+
+  &.is-disabled {
+    .g-rate-item {
+      cursor: default;
+
+      &:hover {
+        transform: scale(1);
+      }
+    }
+  }
+
+  &-list {
+    display: inline-block;
+    height: 18px;
+    vertical-align: middle;
+  }
+
+  &-item {
+    position: relative;
+    display: inline-block;
+    margin-right: 6px;
+    font-size: 18px;
+    color: #c6d1de;
+    cursor: pointer;
+    transition: .3s;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover {
+      transform: scale(1.15);
+    }
+  }
+
+  .is-half {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    overflow: hidden;
+  }
+
+  &-text {
+    display: inline-block;
+    margin-left: 10px;
+    font-size: 14px;
+    vertical-align: middle;
+  }
+}

examples/ts/.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+ELF_APP__ENV=development

examples/ts/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+.cache
+node_modules/
+/dist/
+npm-debug.log*
+lerna-debug.log
+yarn-debug.log*
+yarn-error.log*
+report
+coverage
+dist
+lib
+package-lock.json
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

examples/ts/babel.config.js

@@ -0,0 +1,16 @@
+
+module.exports = {
+  plugins: [
+    '@vue/babel-plugin-transform-vue-jsx',
+    ['@babel/plugin-proposal-decorators', { legacy: true }]
+  ],
+  presets: [
+    [
+      '@babel/env',
+      {
+        useBuiltIns: 'usage',
+        corejs: 2
+      }
+    ]
+  ]
+}

examples/ts/elf.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  pluginOptions: {
+    typescript2: {
+      objectHashIgnoreUnknownHack: true
+    }
+  }
+}

examples/ts/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "rate",
+  "description": "rate component",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "start": "elf-scripts build",
+    "umd": "elf-scripts umd",
+    "iife": "elf-scripts iife",
+    "serve": "elf-scripts serve"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "core-js": "^2.6.9",
+    "vue": "^2.5.17",
+    "vue-class-component": "^7.1.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.6.2",
+    "@vue/babel-plugin-transform-vue-jsx": "^1.0.0"
+  }
+}

examples/ts/src/index.js

@@ -0,0 +1,4 @@
+import Rate from './rate';
+import './style.scss';
+
+export default Rate;

examples/ts/src/rate.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <input v-model="msg" />
+    <p>prop: {{propMessage}}</p>
+    <p>msg: {{msg}}</p>
+    <p>helloMsg: {{helloMsg}}</p>
+    <p>computed msg: {{computedMsg}}</p>
+    <button @click="greet">Greet</button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+const AppProps = Vue.extend({
+  props: {
+    propMessage: String
+  }
+})
+
+@Component({})
+export default class App extends AppProps {
+  // initial data
+  msg: string = 'hi'
+
+  // use prop values for initial data
+  helloMsg = 'Hello, ' + this.propMessage
+
+  // lifecycle hook
+  mounted () {
+    this.greet()
+  }
+
+  // computed
+  get computedMsg () {
+    return 'computed ' + this.msg
+  }
+
+  // method
+  greet () {
+    alert('greeting: ' + this.msg)
+  }
+}
+</script>

examples/ts/src/style.scss

@@ -0,0 +1,76 @@
+
+@font-face {
+  font-family: "grate";
+  src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAR0AAsAAAAABzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY+VUpcY21hcAAAAYAAAABXAAABhnGv1IxnbHlmAAAB2AAAAK8AAAEUwi/5HmhlYWQAAAKIAAAALAAAADYSdy7IaGhlYQAAArQAAAAcAAAAJAfeA4RobXR4AAAC0AAAAAwAAAAMDAAAAGxvY2EAAALcAAAACAAAAAgATgCKbWF4cAAAAuQAAAAeAAAAIAEPADluYW1lAAADBAAAAUUAAAJtPlT+fXBvc3QAAARMAAAAJwAAADo9U12GeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye33+Rxdzwv4EhhrmBoQEozAiSAwD3jA0veJztkLERgDAMA99OSMExCAUDUTEAS1OSLYLiwBbo7q2z7ErABCSxiQx2YHTtSi3yxBx5jp8iN/y+6tkafC6ZbiXcNQq/lpjru3lva9CbrecAfwDu5xJ2AHicY2BiAALmlcz2DEoMOgwMjPqMaupqbPxMbOxsYvKM7Gzicoz2jOJi5nZAGXMzczM1VnF1dnN1e0Z5Ruaef4WsXDwS7IX/uNm5GDl36DCysknyPH7MxcXHx6izg52Jif/ff5W9e1VmXomLu8Ikr/qMi4WNg+eZKhM7lxTX5r9cXDzsbOXlrIzMorx/N3Nw84qev5ScfGmq/P798iBnMSK5jQiXEeMeYhwBACs6NOIAeJxjYGRgYADii+olZ+L5bb4ycLMwgMD1NaVuyDQLA7M9kOJgYALxABk6CLV4nGNgZGBgbvjfwBDDwgACQJKRARUwAwBHCQJsBAAAAAQAAAAEAAAAAAAAAABOAIp4nGNgZGBgYGbQZWBiAAEQyQWEDAz/wXwGAA0uAUkAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJmRiZGZkYWBpbgksYgTROimZebkMDAAADayBXEA") format("woff"); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+}
+
+[class^="g-icon"] {
+
+  display: inline-block;
+  font-family: "grate";
+  font-style: normal;
+  line-height: 1;
+  text-align: center;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  vertical-align: baseline;
+  -webkit-font-smoothing: antialiased;
+}
+
+.g-icon-star:before { content: "\e7df"; }
+
+.g-icon-star-fill:before { content: "\e86a"; }
+
+.g-rate {
+  font-size: 0;
+  line-height: 1;
+
+  &.is-disabled {
+    .g-rate-item {
+      cursor: default;
+
+      &:hover {
+        transform: scale(1);
+      }
+    }
+  }
+
+  &-list {
+    display: inline-block;
+    height: 18px;
+    vertical-align: middle;
+  }
+
+  &-item {
+    position: relative;
+    display: inline-block;
+    margin-right: 6px;
+    font-size: 18px;
+    color: #c6d1de;
+    cursor: pointer;
+    transition: .3s;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover {
+      transform: scale(1.15);
+    }
+  }
+
+  .is-half {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    overflow: hidden;
+  }
+
+  &-text {
+    display: inline-block;
+    margin-left: 10px;
+    font-size: 14px;
+    vertical-align: middle;
+  }
+}

examples/ts/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "sourceMap": true,
+    "target": "es5",
+    "lib": ["es2017", "dom"],
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationDir": "typings",
+    "experimentalDecorators": true
+  },
+  "files": [
+    "src/index.js"
+  ]
+}

examples/ts/typings/rate.vue.d.ts

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+declare const AppProps: import("vue").VueConstructor<{
+    propMessage: string;
+} & Vue>;
+export default class App extends AppProps {
+    msg: string;
+    helloMsg: string;
+    mounted(): void;
+    readonly computedMsg: string;
+    greet(): void;
+}
+export {};