Merge pull request #17 from timreichen/system-bundling

add system bundling

README.md

@@ -1,8 +1,8 @@
 # Bundler
-A lightweight bundler that transpiles deno ```typescript``` files for the web.
+A lightweight bundler that transpiles and bundles deno `typescript` files for the web.
 
 ## Why Use Bundler
-Typescript as of today does throw an error if an import has a ```.ts``` extension or a url.
+Typescript as of today does throw an error if an import has a `.ts` extension or a url.
 ```ts
 import { foo } from "bar.ts" // Typescript Error
 import * as path from "https://deno.land/std/path/mod.ts"  // Typescript Error
@@ -15,85 +15,86 @@ import { foo } from "bar" // Deno Error
 
 Bundler bundles deno syntax files (url imports, .ts extensions) for the web.
 
-### But there is ```deno bundle```
-Deno offers ```deno bundle``` to transpile a file to a standalone module. This may  work in the web for small modules, but is not not ideal for large projects where code needs to be dynamically imported.
+### Copare to `deno bundle`…
+Deno offers `deno bundle` to transpile a file to a standalone module. This might work in some occations but is limited.
+Bundler works in a similar way to `deno bundle` but splits dynamic imports to separate files and injects paths.
 
-## Main features
-- transpiles deno ```typescript``` to ```javascript``` for the web
-- supports css imports by default
+## Features
+- transpiles deno `typescript` to `javascript` for the web
+- bundles file content and imports into one file
+- splits dynamic imports to separate files
+- supports css imports into typescript by default
 
 ## CLI
 
 ### Installation
 Bundler is available as a CLI.
 ```sh
-deno install --unstable --allow-read --allow-write --allow-net --allow-env https://raw.githubusercontent.com/timreichen/Bundler/master/cli.ts --name bundler 
+deno install --unstable --allow-read --allow-write --allow-net --allow-env --name bundler https://raw.githubusercontent.com/timreichen/Bundler/master/cli.ts
 ```
-**Info**: You might need to specify ```--root /usr/local```.
+**Info**: You might need to specify `--root /usr/local`.
 
 ### Usage
 ```sh
-bundler bundle index.ts --name index.js
+bundler bundle index.ts=index.js
 ```
-
+#### Options
+| Option  | Description |
+|---:|---|
+| -c, --config \<FILE> | Load tsconfig.json configuration file|
+| -d, --dir \<DIR> | Name of out_dir |
+| -h, --help | Prints help information |
+| --importmap \<FILE> | UNSTABLE: Load import map file |
+ |-o, --optimize | Minify source code |
+| -r, --reload | Reload source code |
+| -w, --watch | Watch files and re-bundle on change |
 ## Bundler API
-Bundler uses the Bundler API to transpile ```typescript``` files to ```javascript```.
+Bundler uses the Bundler API to transpile `typescript` files to ```javascript```.
 
 ### Usage
 ```ts
-import { Bundler } from "https://raw.githubusercontent.com/timreichen/Bundler/master/mod.ts"
+import { bundle } from "deno.land/x/bundler/mod.ts"
 
-const entry = {
-  path: "src/index.ts",
-  name: "index.js",
-  dir: "dist",
+const inputMap = {
+  "src/index.ts": `console.log("Hello World")`
 }
 
-const compilerOptions = {
-  target: "ESNext",
-  module: "ESNext",
+const outputMap = {
+  "src/index.ts": "dist/index.js"
 }
 
-const bundler = new Bundler()
-
-await bundler.bundle(entry, { compilerOptions })
-
-```
-## How does it work?
-### TypeScript
-Bundler makes it possible to transpile typescript files with ```.ts``` extension for the web.
-It automatically resolves URL paths, fetches and caches the content.
+const options = {
+  outDir
+}
 
-Before
-  ```ts
-/* index.ts */
-import { foo } from "https://url/to/somewhere.ts"
-console.log(foo)
-```
-After
-```js
-import { foo } from "./8277fbd0-903e-4a4b-87a7-cfa876924c7a.js"
-console.log(foo)
+const fileMap = await bundle(inputMap, outputMap, options)
 ```
 
-### CSS
-Bundler CLI supports css imports by default.
+### CSS imports
+Bundler CLI supports css imports by default. It supports [postcss-preset-env](https://preset-env.cssdb.org) with **stage 2** features and **nesting-rules** enabled so you can use the latest css features out of the box.
 
 Before
 ```css
 /* styles.css */
-div { background: red; }
+article {
+  & p {
+    color: #333;
+  }
+}
 ```
+
 ```js
-import styles from "./styles.css"
+import styles from "styles.css"
+console.log(styles) // div { background: red; }
 ```
+
 After
 ```js
-/* 8277fbd0-903e-4a4b-87a7-cfa876924c7a.js */
-export default `div { background: red; }`
+/* 380B7B38760DD442E897EB0164C58F6A17DA966CCACA6318017A468C163979B1.js */
+export default `article p { color: #333; }`
 ```
 ```js
-import styles from "./8277fbd0-903e-4a4b-87a7-cfa876924c7a.js"
+import styles from "./380B7B38760DD442E897EB0164C58F6A17DA966CCACA6318017A468C163979B1.js"
 console.log(styles) // div { background: red; }
 ```
 
@@ -103,6 +104,8 @@ console.log(styles) // div { background: red; }
 - [css import](https://github.com/timreichen/Bundler/tree/master/examples/css%20import)
 - [lit-element](https://github.com/timreichen/Bundler/tree/master/examples/lit-element)
 - [React](https://github.com/timreichen/Bundler/tree/master/examples/react)
-
+- [dynamic import](https://github.com/timreichen/Bundler/tree/master/examples/dynamic%20import)
+- [top level await](https://github.com/timreichen/Bundler/tree/master/examples/top%20level%20await)
+- [custom bundler](https://github.com/timreichen/Bundler/tree/master/examples/custom%20bundler)
 ## Proof of concept
 This is a proof of concept registry. Do not use in production!

_helpers.ts

@@ -1,5 +1,5 @@
-import { isAbsolute, extname } from "https://deno.land/std@0.63.0/path/mod.ts";
-import { yellow } from "https://deno.land/std@0.63.0/fmt/colors.ts";
+import { isAbsolute, extname } from "https://deno.land/std@0.66.0/path/mod.ts";
+import { yellow } from "https://deno.land/std@0.66.0/fmt/colors.ts";
 
 /**
  * returns true if path starts with http:// or https://, else false