add custom-easing & tweens, better docs, and simplify package exports

.devcontainer/Dockerfile

@@ -0,0 +1,18 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.162.0/containers/typescript-node/.devcontainer/base.Dockerfile
+
+# [Choice] Node.js version: 14, 12, 10
+ARG VARIANT="14-buster"
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node packages
+RUN su node -c "npm install -g pnpm"
+
+Run pnpm install -g gulp ultra-runner commitizen && pnpm install

.devcontainer/devcontainer.json

@@ -0,0 +1,53 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.162.0/containers/typescript-node
+{
+	"name": "Node.js & TypeScript",
+	"build": {
+		"dockerfile": "Dockerfile",
+		// Update 'VARIANT' to pick a Node version: 10, 12, 14
+		"args": {
+			"VARIANT": "14"
+		}
+	},
+
+	// Set *default* container specific settings.json values on container create.
+	"settings": {
+		"scss.lint.unknownAtRules": "ignore",
+		"scss.lint.unknownProperties": "ignore",
+		"scss.validate": false,
+		"conventionalCommits.scopes": [
+			"demo",
+			"@okikio/animate",
+			"@okikio/native",
+			"@okikio/manager",
+			"@okikio/emitter",
+			"root",
+			"gulpfile"
+		],
+		"npm.packageManager": "pnpm"
+	},
+
+	// Add the IDs of extensions you want installed when the container is created.
+	"extensions": [
+		"vivaxy.vscode-conventional-commits",
+		"bierner.jsdoc-markdown-highlighting",
+		"yzhang.markdown-all-in-one",
+		"shd101wyy.markdown-preview-enhanced",
+		"bradlc.vscode-tailwindcss",
+		"macieklad.tailwind-sass-syntax",
+		"visualstudioexptteam.vscodeintellicode",
+		"voorjaar.windicss-intellisense",
+		"github.github-vscode-theme",
+		"folke.vscode-monorepo-workspace"
+	],
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "npm install -g pnpm",
+	// "postAttachCommand": "pnpm demo",
+
+	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+	"remoteUser": "node"
+}

README.md

@@ -1,5 +1,7 @@
 # native
 
+![GitHub issues](https://img.shields.io/github/issues/okikio/native?style=for-the-badge) ![GitHub](https://img.shields.io/github/license/okikio/native?style=for-the-badge)
+
 `native` is an initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js.
 
 ## Table of Contents
@@ -11,7 +13,7 @@
     - [@okikio/emitter](#okikioemitter)
     - [@okikio/animate](#okikioanimate)
     - [@okikio/native](#okikionative)
-    - [etc](#etc)
+  - [Bundling](#bundling)
   - [API Documentation](#api-documentation)
   - [Usage](#usage)
   - [Trying it Out](#trying-it-out)
@@ -21,40 +23,54 @@
 
 ## Getting started
 
-The `native` project repo is a monorepo with 4 smaller packages within it, they are:
+The `native` initiative repo is a monorepo with 4 smaller packages within it, they are:
 
 ### [@okikio/manager](./packages/manager#readme)
 
+[![npm](https://img.shields.io/npm/v/@okikio/manager?style=flat-square)](https://www.npmjs.com/package/@okikio/manager) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@okikio/manager?style=flat-square)](https://bundlephobia.com/package/@okikio/manager)
+
 The Map class is the most efficient way to handle large amounts of controlled data, but it has some inconvient quirks that would be annoying to handle, so I built this package to avoid some of it's quirks and introduce new features.
 
 _Note: you can install it as a seperate package from the rest of the `@okikio/native` framework._
+
 [Read more...](./packages/manager/README.md)
 
 ### [@okikio/emitter](./packages/emitter#readme)
 
+[![npm](https://img.shields.io/npm/v/@okikio/emitter?style=flat-square)](https://www.npmjs.com/package/@okikio/emitter) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@okikio/emitter?style=flat-square)](https://bundlephobia.com/package/@okikio/emitter)
+
 A small Event Emitter written in typescript with performance and ease of use in mind. It's pretty self explanitory, there are millions of event emitters like this one, the only difference is that this one is optimized for use in the `@okikio/native` framework.
 
 _Note: you can install it as a seperate package from the rest of the `@okikio/native` framework._
+
 [Read more...](./packages/emitter/README.md)
 
 ### [@okikio/animate](./packages/animate#readme)
 
+[![npm](https://img.shields.io/npm/v/@okikio/animate?style=flat-square)](https://www.npmjs.com/package/@okikio/animate) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@okikio/animate?style=flat-square)](https://bundlephobia.com/package/@okikio/animate)
+
 A truly native animation library that takes full advantage of the Web Animation API to create amazingly pollished experiences on all devices. To future proof animation in an easy to use and effiecient manner, I built this library as a light wrapper around the Web Animation API, that takes on conventional means for creating animation today, allowing developers to get started with modern animation today.
 
 _Note: you can install it as a seperate package from the rest of the `@okikio/native` framework._
+
 [Read more...](./packages/animate/README.md)
 
 ### [@okikio/native](./packages/native#readme)
 
-`@okikio/native` is the framework component of the `native` initiative, it bundles all the other packages into iteself. This package encourages the user to download/copy-and-paste the code into their development enviroment of choice, and tweak it to match their projects needs.
+[![npm](https://img.shields.io/npm/v/@okikio/native?style=flat-square)](https://npmjs.com/package/@okikio/native) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@okikio/native?style=flat-square)](https://bundlephobia.com/package/@okikio/native)
+
+`@okikio/native` is the framework component of the `native` initiative. This package encourages the user to download/copy-and-paste the code into their development enviroment of choice, and tweak it to match their projects needs.
+
 [Read more...](./packages/native/README.md)
 
-### etc
+## Bundling
 
 ***Note**: All package in the `native` initiative are built for ES2020, This project expects the user to use a build tool to support older versions of browsers, the idea being most people are using evergreen browsers, so, why are web developers piling on polyfill code that most users don't need. I suggest `esbuild`, `rollup`, `*typescript`, or `webpack` for bundling the library, and for polyfills `babel` or `polyfill.io`.*
 
 **I have found typescript to be the best method for bundling for older browsers e.g. IE11. I only suggest you use `babel` for polyfilling `Promise`, `fetch`, etc...*
 
+I suggest using [bundle.js.org](https://bundle.js.org), if you would like to quickly bundle the package online or check the size of your final bundle.
+
 ## API Documentation
 
 Go to [okikio.github.io/native/docs](https://okikio.github.io/native/docs), for a more detailed API documentation on the native initiative.

TODO.md

@@ -4,9 +4,9 @@
 * [x] Create TODO.md for all packages
 * [x] Fix 404 pages requiring a second press on mobile
 * [x] Fix Hash Action not scrolling to correct element of a new page (switch to using getBoundingClientRects)
-* [ ] Add the `Shell` class that allows for frameworks to interupt the PJAX process
-  * [ ] Allow for an Hybrid between PJAX, and JS SPA frameworks
-* [ ] Use Cypress to automate Demo tests 
+* [ ] ~~Add the `Shell` class that allows for frameworks to interupt the PJAX process~~
+  * [ ] ~~Allow for an Hybrid between PJAX, and JS SPA frameworks~~
+* [ ] Use Cypress or Playwright to automate Demo tests 
 * [ ] Update TODO.md for all packages
 * [x] Update to Node v15
 * [x] Remove gulp-sass, replace with [email protected] & postcss-sass

build/ts/modules/animate.ts

@@ -1,6 +1,9 @@
-import { animate, IAnimationOptions, methodCall, TypePlayStates, UnitPXCSSValue } from "@okikio/native";
+import { methodCall } from "@okikio/manager";
+import { animate, tweenAttr } from "@okikio/animate";
 import { interpolate } from "polymorph-js";
 
+import type { IAnimationOptions, TypePlayStates } from "@okikio/animate";
+
 // I added extra code to the demo to support Chrome 77 and below
 let playbackFn = (containerSel, anims) => {
     let playstateEl = document.querySelector(`${containerSel} #playstate-toggle`) as HTMLInputElement;
@@ -93,7 +96,6 @@ export let run = () => {
             let startPath = usingPolymorphPathEl.getAttribute("d");
             let endPath =
                 "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z";
-            let emptyEl = document.querySelector(".empty");
 
             let options: IAnimationOptions = {
                 duration: 1800,
@@ -103,12 +105,6 @@ export let run = () => {
                 direction: "alternate",
             };
 
-            empty = animate({
-                target: emptyEl,
-                options,
-                opacity: [0, 1],
-            });
-
             svgAnim2 = animate({
                 target: usingPolymorphPathEl,
                 options,
@@ -133,19 +129,14 @@ export let run = () => {
                 precision: 3
             });
 
-            try {
-                let style = getComputedStyle(emptyEl);
-                empty.on("update", () => {
-                    let progress = Number(style.getPropertyValue("opacity"));
-                    let currentPath = morph(progress);
-                    usingPolymorphPathEl.setAttribute("d", `` + currentPath);
-                });
-            } catch (e) {
-                empty?.stopLoop();
-                console.log(e);
-            }
+            empty = tweenAttr({
+                target: usingPolymorphPathEl,
+                options,
+                d: progress => morph(progress),
+                easing: "linear"
+            });
 
-            playbackFn(containerSel, [empty, svgAnim1, svgAnim2]);
+            playbackFn(containerSel, [empty, svgAnim1, svgAnim2]); 
         }
     })();
 

build/ts/transitions/BigTransition.ts

@@ -1,4 +1,6 @@
-import { ITransition, ITransitionData, animate } from "@okikio/native";
+import { animate } from "@okikio/animate";
+
+import type { ITransition, ITransitionData } from "@okikio/native";
 
 export const BigTransition: ITransition = {
     name: "big",

build/ts/transitions/Fade.ts

@@ -1,4 +1,6 @@
-import { ITransition, ITransitionData, animate } from "@okikio/native";
+import { animate } from "@okikio/animate";
+
+import type { ITransition, ITransitionData } from "@okikio/native";
 
 //== Transition
 export const Fade: ITransition = {

build/ts/transitions/Slide.ts

@@ -1,4 +1,6 @@
-import { ITransition, ITransitionData, animate } from "@okikio/native";
+import { animate } from "@okikio/animate";
+
+import type { ITransition } from "@okikio/native";
 
 //== Transitions
 export const Slide: ITransition = {

gulpfile.js

@@ -167,14 +167,7 @@ tasks({
                 }),
 
                 // Minify
-                terser({
-                    keep_fnames: false, // change to true here
-                    toplevel: true,
-                    compress: {
-                        dead_code: true,
-                    },
-                    ecma: 5,
-                }),
+                terser(),
 
                 size({ gzip: true, showFiles: true, showTotal: false  })
             ],
@@ -222,14 +215,7 @@ tasks({
                 }),
 
                 // Minify
-                terser({
-                    keep_fnames: false, // change to true here
-                    toplevel: true,
-                    compress: {
-                        dead_code: true,
-                    },
-                    ecma: 5,
-                }),
+                terser(),
                 size({ gzip: true, showFiles: true, showTotal: false  })
             ],
             dest: jsFolder, // Output
@@ -303,8 +289,8 @@ task("watch", async () => {
         }
     );
 
-    watch(`${pugFolder}/**/*.pug`, series("html", "css", "reload"));
-    watch([`${sassFolder}/**/*.scss`, `./tailwind.cjs`], series("css"));
+    watch(`${pugFolder}/**/*.pug`, series("html", "reload"));
+    watch([`${sassFolder}/**/*.scss`, `${pugFolder}/**/*.pug`, `./tailwind.cjs`], series("css"));
     watch(
         [
             `${tsFolder}/**/*.ts`,

package.json

@@ -7,7 +7,7 @@
         "packages/*"
     ],
     "scripts": {
-        "commit": "git cz",
+        "commit": "cz",
         "typedoc": "del-cli docs/ && typedoc",
         "build": "pnpm -r build",
         "watch": "pnpm -r watch --parallel",
@@ -37,6 +37,8 @@
         }
     },
     "dependencies": {
+        "@okikio/animate": "workspace:^2.2.0",
+        "@okikio/manager": "workspace:^2.1.7",
         "@okikio/native": "workspace:*",
         "polymorph-js": "^1.0.2"
     },
@@ -45,37 +47,36 @@
         "@commitlint/cli": "^12.1.4",
         "@commitlint/config-conventional": "^12.1.4",
         "@csstools/postcss-sass": "^4.0.0",
-        "@strictsoftware/typedoc-plugin-monorepo": "^0.4.2",
         "autoprefixer": "^10.2.6",
-        "browser-sync": "^2.26.14",
+        "browser-sync": "^2.27.3",
         "chalk": "^4.1.1",
-        "chokidar": "^3.5.1",
+        "chokidar": "^3.5.2",
         "commitizen": "^4.2.4",
         "del": "^6.0.0",
-        "del-cli": "^3.0.1",
-        "esbuild": "^0.12.5",
+        "del-cli": "^4.0.0",
+        "esbuild": "^0.12.12",
         "gulp": "^4.0.2",
-        "gulp-esbuild": "^0.8.0",
+        "gulp-esbuild": "^0.8.2",
         "gulp-plumber": "^1.2.1",
         "gulp-postcss": "^9.0.0",
-        "gulp-pug": "^4.0.1",
+        "gulp-pug": "^5.0.0",
         "gulp-rename": "^2.0.0",
-        "gulp-size": "^4.0.0",
+        "gulp-size": "^4.0.1",
         "gulp-terser": "^2.0.1",
         "gulp-typescript": "^6.0.0-alpha.1",
         "gzip-size": "^6.0.0",
         "husky": "^6.0.0",
         "lerna-changelog": "^1.0.1",
         "path-to-regexp": "^6.2.0",
-        "pnpm": "^6.6.2",
-        "postcss": "^8.3.0",
+        "pnpm": "^6.9.1",
+        "postcss": "^8.3.5",
         "postcss-csso": "^5.0.1",
-        "postcss-scss": "^3.0.5",
+        "postcss-scss": "^4.0.0",
         "pretty-bytes": "^5.6.0",
-        "sass": "^1.34.0",
-        "tailwindcss": "^2.1.2",
-        "typedoc": "^0.20.36",
-        "typescript": "4.2",
+        "sass": "^1.35.1",
+        "tailwindcss": "^2.2.4",
+        "typedoc": "^0.21.2",
+        "typescript": "~4.3.4",
         "ultra-runner": "^3.10.5"
     }
 }