Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: open-coding/webcomponents-json-example
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v2.0
Choose a base ref
...
head repository: open-coding/webcomponents-json-example
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
  • 16 commits
  • 20 files changed
  • 3 contributors

Commits on Jul 19, 2019

  1. * added json-generator to generate json for all autonomous custom ele…

    …ments
    
    * added json-dispatcher to dispatch json to specific elements
    * fixed some grid layout issues in IE11
    * added possibility to add more webcomponents live in the browser
    * introduced new main.js to have a place to write some JS for the site
    Patrick Möller-Knorr committed Jul 19, 2019
    Copy the full SHA
    66bcca7 View commit details
  2. Update README.md

    Patrick Möller-Knorr authored Jul 19, 2019

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    d310b12 View commit details

Commits on Aug 12, 2019

  1. CSS as importable modules

    franktopel committed Aug 12, 2019
    Copy the full SHA
    7938c3c View commit details
  2. CSS as importable modules

    franktopel committed Aug 12, 2019
    Copy the full SHA
    5cc4a24 View commit details
  3. CSS as importable modules

    franktopel committed Aug 12, 2019
    Copy the full SHA
    09b32e1 View commit details
  4. CSS as importable modules

    franktopel committed Aug 12, 2019
    Copy the full SHA
    d236aec View commit details
  5. Copy the full SHA
    28a138d View commit details
  6. Copy the full SHA
    d16421c View commit details
  7. Copy the full SHA
    7b045e6 View commit details
  8. Copy the full SHA
    daf37be View commit details

Commits on Aug 14, 2019

  1. eslint added in package.json as devDependency.

    Missing semicolons added in source code.
    A-Jassani Mubeen committed Aug 14, 2019
    Copy the full SHA
    bc42ade View commit details
  2. Missing semicolons added in source code.

    A-Jassani Mubeen committed Aug 14, 2019
    Copy the full SHA
    db6fb1c View commit details
  3. Merge pull request #3 from franktopel/master

    CSS as importable modules
    Patrick Möller-Knorr authored Aug 14, 2019

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    9f42c2a View commit details
  4. reverted some changes from last commit:

    * internet explorer is now started again when running project
    * removed background color of inner input in custom-number-field
    * restored some indentation
    Patrick Möller-Knorr committed Aug 14, 2019
    Copy the full SHA
    3041f20 View commit details
  5. removing json attribute after json was dispatched

    Patrick Möller-Knorr committed Aug 14, 2019
    Copy the full SHA
    f74a530 View commit details

Commits on Aug 21, 2019

  1. changed buildstack and introduced autocompleting values

    Patrick Möller-Knorr committed Aug 21, 2019
    Copy the full SHA
    5f76a16 View commit details
16 changes: 9 additions & 7 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
{
"presets": ["@babel/preset-env"],
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-template-literals",
"@babel/plugin-transform-classes",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-proposal-object-rest-spread"
]
}
"@babel/plugin-transform-template-literals",
"@babel/plugin-transform-classes",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-proposal-object-rest-spread"
]
}
18 changes: 18 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"indent": ['error', 4, { 'SwitchCase': 1 }],
}
};
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# webcomponents-json-example

💻 *currently not up to date - introduced json-generator and json-dispatcher, which is not documented yet* 💻

⚠ Experimental ⚠ example that demonstrates how an autonomous custom element can be updated via JSON. I just wanted to write my first custom element and investigate how JSON can be used to initialize and update a webcomponent instead of writing dozens of attributes where some of them may not even result in a standard html attributes, or they may be kept synchronous with attributes on child-elements that the webcomponent created itself. A JSON update mechanism may not be appropriate for every application. This is especially intended for applications that receive data from a server and have no frontend logic in the browser.

The example is deliberately kept very minimalistic and consists of only a few files that are packed via [gulp](https://gulpjs.com/) to the `\dist` folder. There is only a simple build stack just to ensure that this example runs in common browser. Yes, including IE11 😥
32 changes: 16 additions & 16 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
const gulp = require('gulp');
const babel = require('gulp-babel');
const open = require('gulp-open');
const gulp = require('gulp');
const open = require('gulp-open');
const connect = require('gulp-connect');
const webpack = require('webpack-stream');

const webpackConfig = require ('./webpack.config');

const config = {
paths: {
src: {
entry: './src/entry.js',
html: './src/*.html',
css: './src/*.css',
js: './src/**/*.js'
entry: './src/entry.js',
html: './src/*.html',
css: './src/*.css',
shadowCss: './src/**/*.shadow.css',
js: './src/**/*.js'
},
dist: './dist/'
},
@@ -21,27 +21,27 @@ const config = {
}
};

gulp.task('babel', function() {
gulp.task('babel', function () {
return gulp.src(config.paths.src.entry)
.pipe(webpack({output: {filename: 'bundle.js'}, mode: "production"}))
.pipe(babel())
.pipe(webpack(webpackConfig))
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});

gulp.task('watch', function() {
gulp.task('watch', function () {
gulp.watch(config.paths.src.js, gulp.series('babel'));
gulp.watch(config.paths.src.html, gulp.series('html'));
gulp.watch(config.paths.src.css, gulp.series('css'));
gulp.watch(config.paths.src.shadowCss, gulp.series('babel'));
});

gulp.task('html', function() {
gulp.task('html', function () {
return gulp.src(config.paths.src.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
});

gulp.task('css', function() {
gulp.task('css', function () {
return gulp.src(config.paths.src.css)
.pipe(gulp.dest(config.paths.dist))
.pipe(connect.reload());
@@ -55,9 +55,9 @@ gulp.task('connect', function () {
});
});

gulp.task('open', function(){
gulp.task('open', function () {
gulp.src(config.paths.dist + 'index.html')
.pipe(open({uri: config.localServer.url, app: 'iexplore' }));
.pipe(open({uri: config.localServer.url, app: 'iexplore' }));
});

gulp.task('copy', gulp.parallel('html', 'css', 'babel'));
Loading