From f405b1cc58b773c13f25dbfda5bb1b1f09a15f86 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Fri, 15 May 2020 22:51:31 +0200
Subject: [PATCH] update

---
 .github/workflows/publish.yaml                |   2 +-
 .../workflows/template_initialization.yaml    |   1 +
 README.md                                     | 142 +++++++++++++++---
 README.template.md                            |  41 +++++
 TEMPLATE_README.md                            |  52 -------
 package.json                                  |  21 ++-
 src/test/getProjectRoot.ts                    |   5 +
 src/test/index.ts                             |   3 +-
 src/tools/getProjectRoot.ts                   |   1 +
 tsconfig.esm.json                             |   8 +
 tsconfig.json                                 |   4 +-
 11 files changed, 195 insertions(+), 85 deletions(-)
 create mode 100644 README.template.md
 delete mode 100644 TEMPLATE_README.md
 create mode 100644 src/test/getProjectRoot.ts
 create mode 100644 tsconfig.esm.json

diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index c8697c0..3745266 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -68,7 +68,7 @@ jobs:
         git config --local user.email "ts_ci@github.com"
         git config --local user.name "ts_ci"
         git add -A
-        git commit -am "Automatic structural changes"
+        git commit -am "Moving dist files to root for shorter import statements."
     - name: Push changes
       uses: ad-m/github-push-action@v0.5.0
       with:
diff --git a/.github/workflows/template_initialization.yaml b/.github/workflows/template_initialization.yaml
index cfdb4aa..8297e40 100644
--- a/.github/workflows/template_initialization.yaml
+++ b/.github/workflows/template_initialization.yaml
@@ -28,6 +28,7 @@ jobs:
         IS_AVAILABLE_ON_NPM: ${{steps.id1.outputs.is_available_on_npm}}
 
     - uses: actions/checkout@v2
+    - run: mv README.template.md README.md
     - name: Replace tokens in README.MD and package.json
       uses: cschleiden/replace-tokens@v1
       with: 
diff --git a/README.md b/README.md
index d3574db..d0420fd 100644
--- a/README.md
+++ b/README.md
@@ -1,41 +1,135 @@
-
 <p align="center">
-    <img src="https://user-images.githubusercontent.com/6702424/80216211-00ef5280-863e-11ea-81de-59f3a3d4b8e4.png">  
+    <img src="https://user-images.githubusercontent.com/6702424/82094662-cd17c200-96fd-11ea-8645-808344bad951.png">  
 </p>
 <p align="center">
-    <i>#{DESC}#</i>
+    <i> A template to assist you in creating and publishing TypeScript modules.</i>
     <br>
     <br>
-    <img src="https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#/workflows/ci/badge.svg?branch=master">
-    <img src="https://img.shields.io/bundlephobia/minzip/#{REPO_NAME}#">
-    <img src="https://img.shields.io/npm/dw/#{REPO_NAME}#">
-</p>
-<p align="center">
-  <a href="https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#">Home</a>
-  -
-  <a href="https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#">Documentation</a>
-  -
-  <a href="https://gitter.im/#{REPO_NAME}#/">Chat</a>
 </p>
 
 ---
 
-# Install / Import
+# Presentation 
 
-```bash
-> npm install --save #{REPO_NAME}#
-```
+This template automate the boring and tedious tasks of:
+- Filling up the ``package.json``
+- Setting up Typescript.
+- Writing a [README.md](https://github.com/garronej/denoify_ci/blob/dev/README.template.md) with decent presentation and instructions on how to install/import your module.
+- Testing on multiples ``Node`` version before publishing.
+- Maintaining a CHANGELOG.
+- Publishing on NPM.
+
+Good stuffs that come with using this template:
+- No source file are tracked on the default branch .
+- Shorter specific file import path.  
+  ``import {...} from "my_module/theFile"`` instead of the usual
+  ``import {...} from "my_module/dist/theFile"`` 
+- CDN distribution for importing from an ``.html`` file with a ``<script>`` tag.
+
+# How to use
+
+## Fork it ( click use the template )
+
+- Click on *Use this template*
+- The repo name you will chose will be used as module name for NPM so:
+  - Be sure that the repo name make for a valid NPM module name.
+  - Check if the module name is available on NPM.
+- The description you provide will be the one used on NPM ( you can change it later )
+
+Once you've done that a GitHub action workflow will setup the ``README.md`` and the ``package.json`` for you, wait a couple of minute for it to compleat ( a bot will push ). You can follow it's advancement in the "Action" tab.
+
+Each time you will push changes ``npm test`` will be run on remote docker containers against multiple Node and Deno versions, if everything passes you will get a green ``ci`` badges on your readme.
+
+## Enable automatic publishing.
+
+Once you are ready to make your package available on NPM and deno.land/x you 
+will need to provide two token so that the workflow can publish on your behalf:
+
+Go to repository ``Settings`` tab, then ``Secrets`` you will need to add two new secrets:
+- ``NPM_TOKEN``, you NPM authorization token.
+- ``PAT``, GitHub **P**ersonal **A**ccess **T**oken with the **repo** authorization. [link](https://github.com/settings/tokens)
+
+To trigger publishing edit the ``package.json`` ``version`` field ( ``0.0.0``-> ``0.0.1`` for example) then push changes... that's all !
+The publishing will actually be performed only if ``npm test`` passes to avoid oopsies.  
+
+# Customizations: 
+
+## Changing the directory structures.
+
+All your sources files must remain inside the ``src`` dir, you can change how things are organized
+but don't forget to update your ``package.json`` ``main``, ``type`` and ``files`` fields and ``tsconfig.esm.json`` ``include`` field when appropriate!
+
+## Swipe the image in README.md
+
+A good way to host your repo image is to open an issue named ASSET in your project, close it, create a comment, drag and drop the picture you want to use and that's it. You have a link that you can replace in the README.md.  
+While you are at it submit this image as *social preview* in your repos github page's settings so that when you share on
+Tweeter or Reddit you don't get your GitHub profile picture to shows up.
+
+## Disable CDN build 
+
+If your project does not target the browser or if you are not interested in offering CDN distribution:
+
+- Remove all ``cdn:*`` npm scripts and ``npm run cdn`` from the `build` script ( in ``package.json`` ).
+- Remove ``./tsconfig.esm.json``
+- Remove ``/dist/esm/`` entry from ``files`` in ``package.json`` 
+- Remove ``simplifyify`` and ``terser`` from dev dependencies.
+
+## Remove unwanted dev dependencies.
+
+Dev dependencies that are not required by the template, ( you can safely remove them, if you don't use them ):
+
+- ``evt``
+- ``@types/node``
+
+Must keep: 
+
+- ``typescript``
+- ``denoify`` ( for the script that moves dist files to the root before publishing )
+- ``simplifyify`` ( for CDN build )
+- ``terser`` ( for CDN build )
+
+
+# WARNINGS:
+
+- The template does not support ``.npmignore`` use ``package.json`` ``files`` instead.
+- The template does not support ``.npmrc``
+
+The drawback of having short import path is that the dir structure  
+is not exactly the same in production ( in the npm bundle ) and in development.
+
+The files and directories in ``dist/`` will be moved to the root of the project.  
+
+As a result this won't work in production: 
+
+``src/index.ts``
 ```typescript
-import { myFunction, myObject } from '#{REPO_NAME}#'; 
-//OR to import a specific file:
-import { myFunction } from '#{REPO_NAME}#/myFunction'
-import { myObject } from '#{REPO_NAME}#/myObject'
+import * as fs from "fs";
+import * as path from "path";
+
+const str = fs.readFileSync(
+    path.join(__filename,"..", "package.json")
+).toString("utf8");
 ```
 
-## CI
+Because ``/dist/index.js`` will be moved to ``/index.js``
 
-This repository has has continus integration and automatic publishing implemented via GitHub Action. 
+You'll have to do: 
 
-Refer to [TEMPLATE_README.md](https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#/blob/dev/TEMPLATE_README.md) for instructions. 
+``src/index.ts``
+```typescript
+import * as fs from "fs";
+import * as path from "path";
+import { getProjectRoot } from "./tools/getProjectRoot";
 
+const str = fs.readFileSync(
+    path.join(getProjectRoot(),"package.json")
+).toString("utf8");
+```
 
+# Re-triggering the CI tests
+
+To manually re-trigger the workflows run on the last commit run the following commands:  
+```bash
+git commit -m "Retrigger CI" --allow-empty
+git push -f
+```
\ No newline at end of file
diff --git a/README.template.md b/README.template.md
new file mode 100644
index 0000000..d3574db
--- /dev/null
+++ b/README.template.md
@@ -0,0 +1,41 @@
+
+<p align="center">
+    <img src="https://user-images.githubusercontent.com/6702424/80216211-00ef5280-863e-11ea-81de-59f3a3d4b8e4.png">  
+</p>
+<p align="center">
+    <i>#{DESC}#</i>
+    <br>
+    <br>
+    <img src="https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#/workflows/ci/badge.svg?branch=master">
+    <img src="https://img.shields.io/bundlephobia/minzip/#{REPO_NAME}#">
+    <img src="https://img.shields.io/npm/dw/#{REPO_NAME}#">
+</p>
+<p align="center">
+  <a href="https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#">Home</a>
+  -
+  <a href="https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#">Documentation</a>
+  -
+  <a href="https://gitter.im/#{REPO_NAME}#/">Chat</a>
+</p>
+
+---
+
+# Install / Import
+
+```bash
+> npm install --save #{REPO_NAME}#
+```
+```typescript
+import { myFunction, myObject } from '#{REPO_NAME}#'; 
+//OR to import a specific file:
+import { myFunction } from '#{REPO_NAME}#/myFunction'
+import { myObject } from '#{REPO_NAME}#/myObject'
+```
+
+## CI
+
+This repository has has continus integration and automatic publishing implemented via GitHub Action. 
+
+Refer to [TEMPLATE_README.md](https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#/blob/dev/TEMPLATE_README.md) for instructions. 
+
+
diff --git a/TEMPLATE_README.md b/TEMPLATE_README.md
deleted file mode 100644
index 216ab81..0000000
--- a/TEMPLATE_README.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Template features: 
-
-[ts-ci](https://github.com/garronej/ts_ci) is a template that:
-- Automatically fills the paperwork for you: Fills the package.json and README.md
-- Automate testing: Every commit pushed will be automatically tested on docker containers against many Node and Deno version ( ``npm test`` ), if everything passes you'll get a green label on the readme.
-- Publish for you on NPM: Each time you'll change the version number in ``package.json`` a workflow that publishes for NPM and [deno.land](https://deno.land/x/) will trigger. The CHANGELOG.md will be automatically updated based on commit messages since last release.
-- Enable you to only track sources on the main branch: With this template you won't have to track ``dist/`` on your main branch.
-- Enable short import path: No more ``import 'my_module/dist/theFileNeeded'`` your users will be able to ``import 'my_module/theFileNeeded'``.  
-
-# GitHub Repo Secrets to set: 
-
-The following Secrets need to be set to be able to publish.
-
-- ``PAT``: GitHub Personal access token.
-- ``NPM_TOKEN``: NPM Authorization token.
-
-# NOTES:
-
-- The template does not support ``.npmignore`` use ``package.json`` ``files`` instead.
-- The template does not support ``.npmrc``
-- Don't forget to update the ``package.json`` ``files`` entry to specify the files you would like to be included in the NPM bundle.
-- The dev dependency ``evt`` is just used as an utility in the demo ``/src/test/`` directory.
-- The dev dependency ``denoify`` is needed for the NPM script ``enable_short_import_path``.
-
-# Warning
-
-The drawback of having short import path is that the file structure  
-is not exactly the same in production ( in the npm bundle ) and in development.
-
-The files and directories in ``dist/`` will be moved to the root of the project.  
-
-As a result this won't work in production: 
-
-``src/index.ts``
-```typescript
-const buff = require("fs").readFileSync(
-    require("path").join(__filename,"..", "package.json")
-);
-```
-
-Because ``/dist/index.js`` will be moved to ``/index.js``
-
-You'll have to do: 
-
-``src/index.ts``
-```typescript
-import { getProjectRoot } from "./tools/getProjectRoot";
-const buff = require("fs").readFileSync(
-    require("path").join(getProjectRoot(),"package.json")
-);
-```
-
diff --git a/package.json b/package.json
index 307da4f..5ccb8e7 100755
--- a/package.json
+++ b/package.json
@@ -9,17 +9,28 @@
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "scripts": {
-        "tsc": "npx tsc",
-        "build": "npm run tsc",
         "test": "node ./dist/test",
+
+        "tsc": "npx tsc",
+
+        "cdn:bundle:.js": "simplifyify dist/index.js -s #{REPO_NAME}# -o dist/umd_bundle.js --debug --bundle",
+        "cdn:bundle:.min.js": "terser dist/umd_bundle.js -cmo dist/umd_bundle.min.js",
+        "cdn:bundle": "npm run cdn:bundle:.js && npm run cdn:bundle:.min.js",
+        "cdn:esm": "tsc -p tsconfig.esm.json",
+        "cdn": "npm run cdn:bundle && npm run cdn:esm",
+
+        "build": "npm run tsc  npm run cdn",
+
         "enable_short_import_path": "npm run build && npx denoify_enable_short_npm_import_path",
+
         "clean": "rm -rf node_modules dist"
     },
     "author": "u/#{USER_OR_ORG}#",
     "license": "MIT",
     "files": [
         "/dist/*.{d.ts,js,js.map}",
-        "/dist/tools/*.{d.ts,js,js.map}"
+        "/dist/tools/",
+        "/dist/zz_esm/"
     ],
     "keywords": [],
     "homepage": "https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#",
@@ -27,6 +38,8 @@
         "typescript": "^3.9.0",
         "@types/node": "^10.0.0",
         "denoify": "github:garronej/denoify",
-        "evt": "^1.6.8"
+        "evt": "^1.6.8",
+        "simplifyify": "^8.0.1",
+        "terser": "^4.6.10"
     }
 }
diff --git a/src/test/getProjectRoot.ts b/src/test/getProjectRoot.ts
new file mode 100644
index 0000000..fe9fb7c
--- /dev/null
+++ b/src/test/getProjectRoot.ts
@@ -0,0 +1,5 @@
+
+
+import { getProjectRoot} from "../tools/getProjectRoot";
+
+console.log(`Project root path: ${getProjectRoot()} does it seems right ? If yes then PASS`);
diff --git a/src/test/index.ts b/src/test/index.ts
index c3b84f5..50aa770 100644
--- a/src/test/index.ts
+++ b/src/test/index.ts
@@ -19,7 +19,8 @@ import { Deferred } from "evt/dist/tools/Deferred";
 
     for (const name of [
         "myFunction",
-        "myObject"
+        "myObject",
+        "getProjectRoot"
     ]) {
 
         console.log(`Running: ${name}`);
diff --git a/src/tools/getProjectRoot.ts b/src/tools/getProjectRoot.ts
index dcb2b83..1badb4f 100644
--- a/src/tools/getProjectRoot.ts
+++ b/src/tools/getProjectRoot.ts
@@ -1,3 +1,4 @@
+
 import * as fs from "fs";
 import * as path from "path";
 
diff --git a/tsconfig.esm.json b/tsconfig.esm.json
new file mode 100644
index 0000000..50041cb
--- /dev/null
+++ b/tsconfig.esm.json
@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "include": ["src/index.ts"],
+    "compilerOptions": {
+        "module": "es2015",
+        "outDir": "dist/zz_esm",
+    }
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index e5408c5..499e7ec 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,8 +18,6 @@
 	],
 	"exclude": [
 		"node_modules",
-		"dist/**/*",
-		"deno_dist/**/*",
-		"mod.ts"
+		"dist/**/*"
 	]
 }
\ No newline at end of file