setup component publishing 📦🚀

[BryanWilhite]

:warning: this issue was handled incorrectly by me for days as i failed to see that webpack is not needed here until my comments starting on 5/29

• [x] configure packaging :package:
• [ ] setup lerna publish script :rocket:

:book: https://webpack.js.org/guides/author-libraries/ :book: https://webpack.js.org/guides/production :book: https://webpack.js.org/api/cli/ :book: https://webpack.js.org/guides/typescript/ :book: https://github.com/TypeStrong/ts-loader#configuration

:book: https://github.com/lerna/lerna/tree/master/commands/publish#readme

[BryanWilhite]

i see :eyes: Google using webpack with libraryTarget: 'umd' [docs] so i am going with webpack (not just because i have a webpack t-shirt :shirt: )

now Google is centralizing packaging by using “chunks”:

today i am not going to take on the challenge of trying to figure out how this custom node scripting works and be fast, naïve and inefficient

[BryanWilhite]

my issues:

• [x] should "module": "lib/index.js" in package.json be a umd module?
• [x] it looks like webpack is minimizing by default (verify)

:book: https://webpack.js.org/guides/author-libraries/#final-steps

[BryanWilhite]

it turns out that webpack (in 2018) needed special handling for ECMAScript modules: https://cobwwweb.com/export-es6-class-globally-webpack

a webpack issue from 2016 is still open regarding this matter; do i need to turn to rollup?

a quote i have seen before:

If you need code-splitting, or you have lots of static assets, or you’re building something with lots of CommonJS dependencies, Webpack is a better choice. If your codebase is ES2015 modules and you’re making something to be used by other people, you probably want Rollup.

:book: https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

[BryanWilhite]

okay it is possible that my desired webpack-based solution is to:

• omit libraryTarget [docs]
• let ts-loader read from the tsconfig* file and find compilerOptions.module
• remember tsconfig-paths-webpack-plugin when tsconfig* conventions are broken [docs]

[BryanWilhite]

:eyes: i do notice that by removing libraryTarget a bunch of require statements are replaced by a bunch of exports:

[BryanWilhite]

for my second item to :heavy_check_mark: above, i must remind myself :brain: (again) about the TerserPlugin [docs]

[BryanWilhite]

the last commit with the TerserPlugin did not change the output of lib/index.js which implies that running webpack in production mode is doing the same thing the plugin does by default; however the plugin opens things up for future/premature configuration :eyes:

[BryanWilhite]

the last commit comes with no opinionated way of organizing npm scripts on the packages level and per package :eyes:

another way to approach this uncertainty is to say, for today, i am not quite sure whether lerna --publish is needed so i will include npm publish commands per package, allowing me to use lerna bulk operations or the old individual operations

[BryanWilhite]

:waffle: :sun_with_face: :clock1130: okay, i am not packing Typescript types with webpack :grimacing:

:brain: :snail: umm, i am not supposed to be bundling with webpack for lib/ source; my previous work is showing me that i am missing "declaration": true [src] and pkg.types [src]

[BryanWilhite]

:flags: okay, i am convinced that webpack is not supposed to be in use here because bundling is not necessary at this library level; i am tempted to delete all of the stuff i wrote above to cover up :lipstick: my mistake(s) but i would lose information that i could use in future

for example, this webpack.config.js file can be used closer to the end of the production pipeline:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: './src/input-autocomplete.ts',
    plugins: [
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    externals: [
        'lit-element',
        /^lit-element\/.+$/,
        'lit-html',
    ],
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
    output: {
        path: path.resolve(__dirname, 'lib'),
        filename: 'index.js'
    }
};

[BryanWilhite]

okay, whew, my last commit leaves these commitments:

• [x] remove webpack :package: :fire:
• [x] add GIF animation for component documentation :tractor: :sparkles: :books:
• [x] fill out component documentation :black_nib: :books:
• [x] package license :tractor: :sparkles:
• [ ] publish package :package: :rocket: