Vue example

examples/vue/.envrc

@@ -0,0 +1,3 @@
+export HUSKY_SKIP_INSTALL=1
+use_nix
+

examples/vue/.eslintignore

@@ -0,0 +1,5 @@
+webpack.config.js
+
+src/**/*.js
+
+dist/**

examples/vue/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    root: true,
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint'],
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+    ],
+    rules: {
+        // disable the rule for all files
+        '@typescript-eslint/explicit-member-accessibility': 'off',
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-use-before-define': ['off'],
+    },
+    overrides: [
+        {
+            // enable the rule specifically for TypeScript files
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                '@typescript-eslint/explicit-member-accessibility': ['off'],
+            },
+        },
+    ],
+};

examples/vue/.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test

examples/vue/.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+  }

examples/vue/README.md

@@ -0,0 +1,3 @@
+# Markdown Doc
+
+This is a Wiki like Single Page Application (SPA) that uses Markdown (MD) files as data store.

examples/vue/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "bindable-property-ex-vue",
+    "version": "1.0.0",
+    "main": "index.js",
+    "scripts": {
+        "build": "webpack",
+        "start": "webpack-dev-server",
+        "updatelib": "run-script-os",
+        "updatelib:win32": "pushd ..\\.. && npm pack && popd && npm install ../../bindable-property-1.0.0.tgz",
+        "updatelib:default": "pushd ../.. && npm pack && popd && npm install ../../bindable-property-1.0.0.tgz"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "BSD",
+    "description": "",
+    "devDependencies": {
+        "@types/lodash": "^4.14.150",
+        "@types/node": "^13.13.2",
+        "@types/webpack": "^4.41.12",
+        "@types/webpack-dev-server": "^3.10.1",
+        "@typescript-eslint/eslint-plugin": "^2.29.0",
+        "@typescript-eslint/parser": "^2.29.0",
+        "awesome-typescript-loader": "^5.2.1",
+        "css-loader": "^3.5.3",
+        "eslint": "^6.8.0",
+        "html-webpack-plugin": "^4.2.0",
+        "run-script-os": "^1.1.1",
+        "sass": "^1.26.5",
+        "sass-loader": "^8.0.2",
+        "style-loader": "^1.2.0",
+        "ts-node": "^8.9.0",
+        "tsconfig-paths": "^3.9.0",
+        "typescript": "^3.8.3",
+        "vue-loader": "^15.9.2",
+        "vue-template-compiler": "^2.6.11",
+        "webpack": "^4.43.0",
+        "webpack-cli": "^3.3.11",
+        "webpack-dev-server": "^3.10.3",
+        "webpack-merge": "^4.2.2"
+    },
+    "dependencies": {        
+        "cross-env": "^7.0.2",
+        "escape-string-regexp": "^4.0.0",
+        "lit-element": "^2.3.1",
+        "lodash": "^4.17.15",
+        "vue": "^2.6.11"
+    }
+}

examples/vue/shell.nix

@@ -0,0 +1,6 @@
+let nixpkgs = fetchTarball
+  https://releases.nixos.org/nixos/20.03/nixos-20.03.1445.95b9c99f6d0/nixexprs.tar.xz
+  ; pkgs = import <nixpkgs> {}
+  ; in
+pkgs.mkShell { buildInputs = with pkgs; [ nodejs-12_x ]
+             ; }

examples/vue/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}

examples/vue/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>WebComponentTests</title>
+    </head>
+    <body>
+        <h2>Vue binding</h2>
+        <div id="app">
+        </div>
+    </body>
+</html>

examples/vue/src/index.ts

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+
+import Main from "./main.vue";
+
+window.addEventListener('load', () => {
+    new Vue({
+        render: h => h(Main)
+      }).$mount("#app");
+});

examples/vue/src/main.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <button>Random</button>
+        <test-text id="inText" ref="inText"></test-text>
+        <test-textout :text="text"></test-textout>
+        <test-textout :text="text"></test-textout>
+    </div>
+</template>
+
+<script type="ts">
+import './outputcomponent';
+import './textcomponent';
+import { bind } from "../tools/vueHelper";
+
+export default {
+    data: function() {
+        return {text: 'asd'};
+    },
+    mounted: function() {
+        bind(this.$refs.inText.textOut, (val)=>{ this.text = val });
+    }
+}
+</script>
+
+<style lang="scss"></style>

examples/vue/tsconfig.json

@@ -0,0 +1,52 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "declaration": true,
+        "noImplicitAny": false,
+        "lib": [ "DOM", "ESNext" ],
+        "module": "ESNext",
+        "target": "ESNext",
+        "allowJs": true,
+        "sourceMap": true,
+        "experimentalDecorators": true,
+        "moduleResolution": "node",
+        "rootDir": "./src",
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "**/*.spec.ts"]
+}
+
+//{
+//    "compilerOptions": {
+//      "strict": true,
+//      "jsx": "preserve",
+//      "importHelpers": true,
+//      "esModuleInterop": true,
+//      "allowSyntheticDefaultImports": true,
+//      "baseUrl": ".",
+//      "types": [
+//        "webpack-env"
+//      ],
+//      "paths": {
+//        "@/*": [
+//          "src/*"
+//        ]
+//      },
+//      "lib": [
+//        "esnext",
+//        "dom",
+//        "dom.iterable",
+//        "scripthost"
+//      ]
+//    },
+//    "include": [
+//      "src/**/*.ts",
+//      "src/**/*.tsx",
+//      "tests/**/*.ts",
+//      "tests/**/*.tsx"
+//    ],
+//    "exclude": [
+//      "node_modules"
+//    ]
+//  }
+  

examples/vue/webpack.config.js

@@ -0,0 +1,48 @@
+const path = require('path');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+    entry: './src/index.ts',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bundle.js',
+    },
+
+    // Currently we need to add '.ts' to the resolve.extensions array.
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    },
+
+    // Add the loader for .ts files.
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: 'awesome-typescript-loader',
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    // Creates `style` nodes from JS strings
+                    'style-loader',
+                    // Translates CSS into CommonJS
+                    'css-loader',
+                    // Compiles Sass to CSS
+                    'sass-loader',
+                ],
+            },
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
+        ],
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/index.html',
+        }),
+        new VueLoaderPlugin()
+    ],
+};