LitElement example

examples/litelement/.envrc

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

examples/litelement/.eslintignore

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

examples/litelement/.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/litelement/.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/litelement/.prettierrc

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

examples/litelement/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/litelement/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "bindable-property-ex-lit",
+    "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",
+        "eslint": "^6.8.0",
+        "html-webpack-plugin": "^4.2.0",
+        "run-script-os": "^1.1.1",
+        "ts-node": "^8.9.0",
+        "tsconfig-paths": "^3.9.0",
+        "typescript": "^3.8.3",
+        "webpack": "^4.43.0",
+        "webpack-cli": "^3.3.11",
+        "webpack-dev-server": "^3.10.3"
+    },
+    "dependencies": {
+        "bindable-property": "file:../../bindable-property-1.0.0.tgz",
+        "cross-env": "^7.0.2",
+        "escape-string-regexp": "^4.0.0",
+        "lit-element": "^2.3.1",
+        "lodash": "^4.17.15"
+    }
+}

examples/litelement/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/litelement/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>WebComponent binding</h2>
+        <test-bridge></test-bridge>
+        <hr>
+    </body>
+</html>

examples/litelement/src/index.ts

@@ -0,0 +1,3 @@
+import 'bindable-property/dist/components/textcomponent';
+import 'bindable-property/dist/components/outputcomponent';
+import 'bindable-property/dist/components/bridge';

examples/litelement/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/litelement/webpack.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+
+const HtmlWebpackPlugin = require('html-webpack-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',
+            },
+        ],
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './src/index.html',
+        })
+    ],
+};