prep for npm publish (#11)

* add package size to readme * added index.js at root * add meta fields to package.json for publishing * mv d3 modules to peerDependencies * added dev dep: np * configure np * index.js exports bundled module version in build dir * add fields for unpkg & jsdelivr cdns * set version to 0.0.0 * update index.js * added src/index.ts for combining all typings in one module * update types field in package.json * updated install instructions in docs * updated install instructions in readme * use cdn for d3js in docs * rebuild docs * updated analyze script: ignore tests * update readme: added cem info * updated custom-elements manifest * add engines field, update np message * proofread readme
clhenrick · Jan 20, 2022 · d986840 · d986840
1 parent 4fed387
commit d986840
Show file tree

Hide file tree

Showing 9 changed files with 5,954 additions and 212 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ A [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/U
 - Compatable with color interpolators from `d3-scale-chromatic`
 - Customizable via its [properties / attributes](#properties) and [CSS variables](#css-variables).
 - Framework and bundler not required, just add a `<script>` tag and use it!
-- TODO: [Small bundle size](https://bundlephobia.com/package/color-legend-element) (<>kb minified, <>kb gzipped)
+- [Small bundle size](https://bundlephobia.com/package/color-legend-element) (52kb minified and 18kb gzipped)
 
 ## Installation
 
@@ -36,13 +36,16 @@ import "color-legend-element";
 To use without a frontend build tool, add the `<color-legend>` via a `<script>` tag in your HTML document.
 
 ```html
-<script type="module" src="/path/to/color-legend-element.bundle.js"></script>
+<script
+  type="module"
+  src="color-legend-element/build/color-legend-element.js"
+></script>
 ```
 
 If you prefer to not use the ESM build, you may instead use the UMD build:
 
 ```html
-<script src="/path/to/color-legend-element.umd.js"></script>
+<script src="color-legend-element/build/color-legend-element.umd.js"></script>
 ```
 
 ## Example Usage
@@ -53,7 +56,7 @@ The `<color-legend>` will render using its default settings as follows:
 <color-legend></color-legend>
 ```
 
-It may be customized by providing values for its properties and CSS variables (see below).
+It may be customized by settings its properties and CSS variables (full list below).
 
 See [the color-legend website](https://clhenrick.github.io/color-legend-element) for more examples of how to use the Color Legend Element.
 
@@ -128,6 +131,8 @@ color-legend {
 
 ## Local Development
 
+Requires Node.js v16.13.0 and NPM >=8.
+
 In the root of this repository first install dependencies:
 
 ```bash
@@ -136,6 +141,8 @@ npm install
 
 ### Building from src
 
+All compiled files will be outputted in the `build/` directory.
+
 To create the ESM build:
 
 ```bash
@@ -159,16 +166,16 @@ npm run bundle
 To view the `<color-legend>` without bundling it:
 
 ```
-npm run dev
+npm run serve
 ```
 
 or
 
 ```
-npm run dev:prod
+npm run serve:prod
 ```
 
-You may then modify the `dev/index.html` and view the changes.
+This will start up a local web server for `dev/index.html`. You may then modify the contents of `src/` and/or `dev/index.html` and inspect the changes in your browser.
 
 ### Running tests
 
@@ -220,6 +227,10 @@ npm run docs:serve
 
 ### Updating the custom-elements.json
 
+According to [Open Web Components](https://github.com/open-wc/custom-elements-manifest#custom-elements-manifest):
+
+> Custom Elements Manifest is a file format that describes custom elements. This format will allow tooling and IDEs to give rich information about the custom elements in a given project.
+
 To update the `custom-elements.json` manifest:
 
 ```bash

diff --git a/custom-elements.json b/custom-elements.json
@@ -717,6 +717,53 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "\"./types\""
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColorLegendElement",
+          "declaration": {
+            "name": "ColorLegendElement",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ColorScaleSetter",
+          "declaration": {
+            "name": "ColorScaleSetter",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AxisTicksSetter",
+          "declaration": {
+            "name": "AxisTicksSetter",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Renderer",
+          "declaration": {
+            "name": "Renderer",
+            "module": "src/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/renderer.ts",

diff --git a/docs-src/_includes/baselayout.njk b/docs-src/_includes/baselayout.njk
@@ -5,7 +5,7 @@
     <title>{{ title }}</title>
     <script defer src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script defer src="./node_modules/lit/polyfill-support.js"></script>
-    <script defer src="./node_modules/d3/dist/d3.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/d3@7.3.0/dist/d3.min.js"></script>
     <script type="module" defer src="./build/color-legend-element.umd.js"></script>
     <link href="./node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet">
     <link rel="stylesheet" href="./assets/index.css" />

diff --git a/docs-src/index.md b/docs-src/index.md
@@ -28,13 +28,16 @@ import "color-legend-element";
 To use without a frontend build tool, add the `<color-legend>` via a `<script>` tag in your HTML document.
 
 ```html
-<script type="module" src="/path/to/color-legend-element.bundle.js"></script>
+<script
+  type="module"
+  src="color-legend-element/build/color-legend-element.js"
+></script>
 ```
 
 If you prefer to not use the ESM build, you may instead use the UMD build:
 
 ```html
-<script src="/path/to/color-legend-element.umd.js"></script>
+<script src="color-legend-element/build/color-legend-element.umd.js"></script>
 ```
 
 ## <a class="anchor" id="usage" href="#usage" aria-hidden>#</a> Usage

diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,7 @@
     <title>Color Legend Element</title>
     <script defer src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script defer src="./node_modules/lit/polyfill-support.js"></script>
-    <script defer src="./node_modules/d3/dist/d3.min.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/d3@7.3.0/dist/d3.min.js"></script>
     <script type="module" defer src="./build/color-legend-element.umd.js"></script>
     <link href="./node_modules/prismjs/themes/prism-okaidia.css" rel="stylesheet">
     <link rel="stylesheet" href="./assets/index.css" />
@@ -40,9 +40,9 @@ <h3><a class="anchor" id="install-npm" href="#install-npm" aria-hidden>#</a> NPM
 <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token string">"color-legend-element"</span><span class="token punctuation">;</span></code></pre>
 <h3><a class="anchor" id="install-script" href="#install-script" aria-hidden>#</a> Script</h3>
 <p>To use without a frontend build tool, add the <code>&lt;color-legend&gt;</code> via a <code>&lt;script&gt;</code> tag in your HTML document.</p>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/path/to/color-legend-element.bundle.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><br>  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><br>  <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color-legend-element/build/color-legend-element.js<span class="token punctuation">"</span></span><br><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
 <p>If you prefer to not use the ESM build, you may instead use the UMD build:</p>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/path/to/color-legend-element.umd.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color-legend-element/build/color-legend-element.umd.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></code></pre>
 <h2><a class="anchor" id="usage" href="#usage" aria-hidden>#</a> Usage</h2>
 <p>The following examples demonstrate how to configure the <code>&lt;color-legend&gt;</code> for representing various types of data such as continuous, categorical, or discrete.</p>
 <p><strong>Note:</strong> most <code>&lt;color-legend&gt;</code> configuration options may be set as either HTML attributes or properties via JavaScript. Unless otherwise noted this is the case, and the word &quot;property&quot; is used interchangeably with &quot;attribute&quot; for brevity.</p>

diff --git a/index.js b/index.js
@@ -0,0 +1,2 @@
+import { ColorLegendElement } from "./build/color-legend-element.js";
+export { ColorLegendElement };