├── .gitignore
├── .travis.yml
├── README.md
├── bin.js
├── dist.js
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | .nyc_output
4 | coverage


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | cache:
 3 |   directories:
 4 |     - node_modules
 5 | notifications:
 6 |   email: false
 7 | node_js:
 8 |   - '8'
 9 | before_script:
10 |   - npm prune
11 | after_success:
12 |   - npm run semantic-release
13 | branches:
14 |   except:
15 |     - /^v\d+\.\d+\.\d+$/
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # distjs 
 2 | 
 3 | Distribute standalone WebComponents w/ npm
 4 | 
 5 | <p>
 6 |   <a href="https://www.patreon.com/bePatron?u=880479">
 7 |     <img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="40px" />
 8 |   </a>
 9 | </p>
10 | 
11 | Usage:
12 | 
13 | ```
14 | > npm install distjs
15 | > distjs install
16 | ```
17 | 
18 | Or, you can manually enable in your package.json.
19 | 
20 | ```
21 | {
22 |   ...
23 |   "scripts": {
24 |     "prepublishOnly": "distjs",
25 |     ...
26 |   }
27 | }
28 | ```
29 | 
30 | Before each npm publish `distjs` will build standealone scripts in a `dist/`
31 | directory. These scripts dynamically load a WebComponents polyfill before
32 | requiring your package.
33 | 
34 | The dist files will be named `${pkgname}.js` and `${pkgname}.min.js`.
35 | 
36 | This means that people can use your new elements with a simple script include
37 | from one of the many npm content CDN's.
38 | 
39 | Example:
40 | 
41 | ```html
42 | <script src="https://cdn.jsdelivr.net/npm/pkgname@latest/dist/pkgname.min.js"></script>
43 | ```
44 | 


--------------------------------------------------------------------------------
/bin.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | let fs = require('fs')
 3 | let path = require('path')
 4 | let minify = require('babel-minify')
 5 | let browserify = require('browserify')
 6 | let rimraf = require('rimraf')
 7 | let mkdirp = require('mkdirp')
 8 | let bl = require('bl')
 9 | let distfile = fs.readFileSync(path.join(__dirname, 'dist.js'))
10 | 
11 | const _browserify = _path => {
12 |   return new Promise((resolve, reject) => {
13 |     let b = browserify()
14 |     b.add(_path)
15 |     b.bundle().pipe(bl((err, buffer) => {
16 |       if (err) return reject(err)
17 |       resolve(buffer)
18 |     }))
19 |   })
20 | }
21 | 
22 | const mkdistfile = cwd => {
23 |   console.log('Creating dist.js file...')
24 |   fs.writeFileSync(path.join(cwd, 'dist.js'), distfile)
25 | }
26 | 
27 | exports.build = async (cwd, name) => {
28 |   mkdistfile(cwd)
29 |   console.log('Creating dist directory...')
30 |   rimraf.sync(path.join(cwd, 'dist'))
31 |   mkdirp.sync(path.join(cwd, 'dist'))
32 |   console.log('Creating browserify bundle...')
33 |   let bundle = await _browserify(path.join(cwd, 'dist.js'))
34 |   console.log(`Bundle size: ${bundle.length}`)
35 |   console.log('Writing browserify bundle to dist/...')
36 |   fs.writeFileSync(path.join(cwd, 'dist', `${name}.js`), bundle)
37 |   console.log('Creating minified bundle...')
38 |   let { code } = await minify(bundle)
39 |   console.log(`Minified size: ${code.length}`)
40 |   fs.writeFileSync(path.join(cwd, 'dist', `${name}.min.js`), code)
41 |   console.log('Cleaning tmp dist.js file.')
42 |   rimraf.sync(path.join(cwd, 'dist.js'))
43 | }
44 | 
45 | const keys = Object.keys
46 | 
47 | const install = cwd => {
48 |   let pkg = require(`${cwd}/package.json`)
49 |   if (!pkg.scripts) pkg.scripts = {}
50 |   pkg.scripts.prepublishOnly = 'distjs'
51 |   let deps = []
52 |   if (pkg.dependencies) deps = deps.concat(keys(pkg.dependencies))
53 |   if (pkg.devDependencies) deps = deps.concat(keys(pkg.devDependencies))
54 |   if (deps.includes('standard')) {
55 |     if (!pkg.standard) pkg.standard = {}
56 |     if (!pkg.standard.ignore) pkg.standard.ignore = []
57 |     if (!pkg.standard.ignore.includes('dist')) {
58 |       pkg.standard.ignore.push('dist')
59 |     }
60 |   }
61 |   fs.writeFileSync(`${cwd}/package.json`, JSON.stringify(pkg, null, 2))
62 | }
63 | 
64 | if (process.argv.length === 2) {
65 |   let cwd = process.cwd()
66 |   exports.build(cwd, require(`${cwd}/package.json`).name)
67 | } else if (process.argv.length === 3) {
68 |   let cwd = process.cwd()
69 |   let command = process.argv[2]
70 |   if (command === 'distfile') {
71 |     mkdistfile(cwd)
72 |   } else if (command === 'install') {
73 |     install(cwd)
74 |   } else {
75 |     throw new Error('unknown command')
76 |   }
77 | } else {
78 |   throw new Error('unknown command')
79 | }
80 | 


--------------------------------------------------------------------------------
/dist.js:
--------------------------------------------------------------------------------
 1 | /* globals CustomEvent */
 2 | process.distjs = true
 3 | let loadjs = require('distjs').loadjs
 4 | 
 5 | const build = name => {
 6 |   // Fast Load for Chrome (avoids skip before render)
 7 |   const getChromeVersion = (force) => {
 8 |     if (force) return true
 9 |     var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)
10 |     return raw ? parseInt(raw[2], 10) > 59 : false
11 |   }
12 |   if (getChromeVersion()) require('./')
13 | 
14 |   window.addEventListener('WebComponentsReady', () => {
15 |     let event = new CustomEvent(`${name}-ready`, require('./'))
16 |     window.dispatchEvent(event)
17 |   })
18 |   const polyfill = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.12/webcomponents-loader.js'
19 |   loadjs([{async: true, url: polyfill}])
20 | }
21 | 
22 | build(require('./package.json').name)
23 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | exports.loadjs = require('load-js')
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "distjs",
 3 |   "version": "0.0.0-development",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "bin": {
 7 |     "distjs": "./bin.js"
 8 |   },
 9 |   "scripts": {
10 |     "commit": "git-cz",
11 |     "test": "standard",
12 |     "start": "budo dist.js:bundle.js",
13 |     "precommit": "npm test",
14 |     "prepush": "npm test",
15 |     "commitmsg": "validate-commit-msg",
16 |     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
17 |   },
18 |   "keywords": [],
19 |   "author": "Mikeal Rogers <mikeal.rogers@gmail.com> (http://www.mikealrogers.com)",
20 |   "license": "Apache-2.0",
21 |   "config": {
22 |     "commitizen": {
23 |       "path": "./node_modules/cz-conventional-changelog"
24 |     }
25 |   },
26 |   "dependencies": {
27 |     "babel-minify": "^0.2.0",
28 |     "bl": "^1.2.1",
29 |     "browserify": "^14.4.0",
30 |     "commitizen": "^2.9.6",
31 |     "load-js": "^2.0.0",
32 |     "mkdirp": "^0.5.1",
33 |     "rimraf": "^2.6.2"
34 |   },
35 |   "devDependencies": {
36 |     "standard": "^10.0.3",
37 |     "cz-conventional-changelog": "^2.0.0",
38 |     "husky": "^0.14.3",
39 |     "semantic-release": "^8.0.3",
40 |     "validate-commit-msg": "^2.14.0"
41 |   },
42 |   "repository": {
43 |     "type": "git",
44 |     "url": "https://github.com/mikeal/distjs.git"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------