timreichen / bundler Goto Github PK

Many tests are failing on Windows due to differing newlines. What is the expected behavior here (and can it be documented please)?

1. Should test files in the repo have CR or CRLF? If the tests are expected to fail one way, the setting should probably be specified in a .gitattributes file
2. Should newlines be normalized by the bundler or left as-is?
3. If the bundler inserts newlines, should they be platform-dependent?

createBundle ...
  simple ... FAILED (43ms)
    error: AssertionError: Values are not equal:


        [Diff] Actual / Expected


        [
          {
    -       output: "file:///dist/9e45b2c928cbe2b3ac0bd66da2fdc2c60eecbb79f0b04d24bbbc1013d35f5e27.js",
    -       source: 'console.log("hello world");\r\n',
    +       output: "file:///dist/110d55de4196564d60bddda37af5e920bd8acce3c57baece085c57d002e401e9.js",
    +       source: 'console.log("hello world");\n',
          },
        ]

      throw new AssertionError(message);
            ^
        at assertEquals (https://deno.land/[email protected]/testing/asserts.ts:176:9)
        at fn (file:///C:/Users/dan/Documents/Cerulean/Bundler/plugins/typescript/typescript_plugin_test.ts:547:9)
        at async testStepSanitizer (deno:runtime/js/40_testing.js:450:7)
        at async asyncOpSanitizer (deno:runtime/js/40_testing.js:148:9)
        at async resourceSanitizer (deno:runtime/js/40_testing.js:376:7)
        at async exitSanitizer (deno:runtime/js/40_testing.js:433:9)
        at async TestContext.step (deno:runtime/js/40_testing.js:1416:13)
        at async fn (file:///C:/Users/dan/Documents/Cerulean/Bundler/plugins/typescript/typescript_plugin_test.ts:539:5)

Javascript files are not emitting in bundler 0.7.2 neither by the cli or by the api, in previous versions this does not happen.

the html index comes from the base example created by snel

These sources are perfectly valid TypeScript:

// A.ts
import { B } from "./B.ts";

export class A {
  static makeB() { return new B(); }
}

// B.ts
import { A } from "./A.ts";

export class B {
  static makeA() { return new A(); }
}

// example.ts
import { A } from "./A.ts";

console.log(A.makeB());

You can run them in deno:

$ deno run example.ts
B {}

You can also run them in node, it's supported by other bundlers, etc.

However, in Bundler, it generates:

Circular Dependency A.ts → B.ts → A.ts
Error: Circular Dependency

I imagine this is a known issue, and, don't get me wrong, I love this project. Still, I want this issue to exist so that you're aware this feature is desired.

I actually think it's kinda fundamentally necessary even if it may be a good idea to avoid it when you can.

Even without that though, not having this feature severely limits the community libraries that can be used when using Bundler.

maybe you can try to remove the x-typescript-types header with no-check option:

import presetEnv from "https://esm.sh/[email protected]?no-check"

After successfully build, I'm trying to compile result code and always got same errors in places like this:

(function (FontNames) {
                FontNames["Courier"] = "Courier";
                FontNames["CourierBold"] = "Courier-Bold";
                FontNames["CourierOblique"] = "Courier-Oblique";
                FontNames["CourierBoldOblique"] = "Courier-BoldOblique";
                FontNames["Helvetica"] = "Helvetica";
                FontNames["HelveticaBold"] = "Helvetica-Bold";
                FontNames["HelveticaOblique"] = "Helvetica-Oblique";
                FontNames["HelveticaBoldOblique"] = "Helvetica-BoldOblique";
                FontNames["TimesRoman"] = "Times-Roman";
                FontNames["TimesRomanBold"] = "Times-Bold";
                FontNames["TimesRomanItalic"] = "Times-Italic";
                FontNames["TimesRomanBoldItalic"] = "Times-BoldItalic";
                FontNames["Symbol"] = "Symbol";
                FontNames["ZapfDingbats"] = "ZapfDingbats";
            })(FontNames || (exports_1("FontNames", FontNames = {})));

Error:

FontNames["Courier"] = "Courier";
                                     ^
TypeError: Cannot set property 'Courier' of undefined

Is it a bug? Or I'm doing something wrong?

This particular case is with
PDF-lib (import from https://cdn.pika.dev/pdf-lib@^1.7.0)

I'm not sure exactly, both of them are using in project.

Deno uses swc transpiler. Replace ts transpiler with rust swc deno plugin.

Gives error:

error: An unsupported media type was attempted to be imported as a module.
  Specifier: https://cdn.esm.sh/v35/[email protected]/deno/sha.js.js
  MediaType: Json

Seems to be because of the extension (.js.js) at the end is wrong; when visiting the webpage https://cdn.esm.sh/v35/[email protected]/deno/sha.js, the file is fine.

All the API examples are failing with this error

error: Uncaught SyntaxError: The requested module '../../plugin.ts' does not provide an export named 'Import'
import { DependencyType, Import, ModuleData } from "../../plugin.ts";
                         ~~~~~~
    at <anonymous> (https://deno.land/x/[email protected]/plugins/typescript/dependencies/extract_dependencies.ts:3:26)

Since the latest version, this bundler's transforming all the files to the requirejs module type. and it's not working with deno and web browser. (require.js required to import the script.)

So if you don't mind, may I change your ts transpile function code to babel?

was testing out bundler, and no out file is being created, or maybe it's being creating in another dir (still a bug)

// a.ts
import * as colours from "https://deno.land/std/fmt/colors.ts"

console.log(colours.red('hello'))

$ deno install --unstable --allow-read --allow-write --allow-net --allow-env --name bundler https://deno.land/x/bundler/cli.ts
$ bundler bundle a.ts=a.js

proper error handling for

• cli
• plugins
• graph
• bundler

// a.ts
import { red } from "https://deno.land/[email protected]/fmt/colors.ts"
console.log(red('hello'))

$ bundler bundle a.ts=a.js

// index.html
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<script src="dist/a.js"></script>
</body>
</html>

Open the web page, or do node dist/a.js, and see `Cannot read property 'red' of undefined'

When I try to use the Bundler or cache it as a dependency, I get this error

Download https://esm.sh/v86/[email protected]/deno/postcss-nesting.js
error: Import 'https://esm.sh/v86/[email protected]/deno/postcss-nesting.js' failed: 500 Internal Server Error
    at https://esm.sh/v86/[email protected]/deno/postcss-preset-env.js:2:2086

It seems that the file in question is not available from esm.sh. When I try to get it from the browser i get this:

/* esm.sh - error */
throw new Error("[esm.sh] " + "open /tmp/esm-build-2112f0f36dbc8a59c1b5aa42d9c9524d7448e54a-462f9c4f/node_modules/postcss-nesting/index.es.js: no such file or directory");
export default null;

So I guess it is no longer available. Which is unfortunate, because I can't seem to get Bundler to work.

Bundler is failing to run with a SyntaxError when trying to import acorn via terser.

Possibly related to terser/terser#1002

deno run --unstable --allow-all -r https://deno.land/x/bundler/spa_server_cli.ts

...

Check https://deno.land/x/bundler/spa_server_cli.ts
error: Uncaught SyntaxError: The requested module '/v51/[email protected]/deno/acorn.js' does not provide an export named 'default'
    at <anonymous> (https://cdn.esm.sh/v51/[email protected]/deno/terser.js:2:172)

deno --version
deno 1.14.0 (release, aarch64-apple-darwin)
v8 9.4.146.15
typescript 4.4.2

When I try to run bundler on the below HTML, I get the error TypeError: i.walkFunctionNodes is not a function

deno run -A --unstable https://deno.land/x/bundler/cli.ts bundle test.html
Entry test.html
TypeError: i.walkFunctionNodes is not a function
at :2:10
at https://cdn.esm.sh/v53/[email protected]/deno/postcss-double-position-gradients.js:2:313
at https://cdn.esm.sh/v53/[email protected]/deno/postcss.js:23:1632
at https://cdn.esm.sh/v53/[email protected]/deno/postcss.js:23:1326
at z.each (https://cdn.esm.sh/v53/[email protected]/deno/postcss.js:23:1194)
at z.walk (https://cdn.esm.sh/v53/[email protected]/deno/postcss.js:23:1301)
at https://cdn.esm.sh/v53/[email protected]/deno/postcss.js:23:1392
at R.each (https://cdn.esm.sh/v53/[email protected]/deno/postcss.js:23:1194)
at R.walk (https://cdn.esm.sh/v53/[email protected]/deno/postcss.js:23:1301)
at R.walkDecls (https://cdn.esm.sh/v53/[email protected]/deno/postcss.js:23:1593)
at Object.plugin (https://cdn.esm.sh/v53/[email protected]/deno/postcss-double-position-gradients.js:2:250)

<!DOCTYPE html>

<html lang="en">
	<head>
		<style>
		body { background-image: linear-gradient(black, white); }
		</style>
	</head>
<body></body>
</html>

export default statement doesn't work if the exported value isn't defined as a function.
Example:

const  HelloWorld = () => <></>
export default HelloWorld

Export null as default value

I am currently using bundler to compile to production (see), but I would like to be able to use it without installing bundler as a cli like rollup

create proper documentation, update readme

Say i have a dir structure like this:

project/
  src/
    some_dir/
      some_file.ts
    another_dir/
      another_file

Essentially there's upwards of 20 files in the src directory, my bundle command will have to look like bundler bundle src/some_dir/some_file=dist/some_dir/some_file ... <-- repeat for every file

I was hoping to just do a bundle copy of the src dir into dist, like how tsc does. Are there any plans on adding an extra flag to do this or extra configs? So for example, i could do: bundler bundle src=dist

Bundler should be able to generate sourcemaps.

implement postcss-preset-env stage:3 and nesting-rules by default.

hi, thanks for amazing libs... im try hello_world examples not working on my OS windows. and Deno version 1.10.2.

Structure

\---src
        index.html
        index.ts
        world.ts

Command on root hello_world

 bundler bundle src/index.html=index.html

Error

Error: file was not found: src\src\world.ts
    at Bundler.readSource (https://deno.land/x/[email protected]/bundler.ts:92:19)
    at async TypescriptTopLevelAwaitModulePlugin.createAsset (https://deno.land/x/[email protected]/plugins/typescript/typescript.ts:88:24)
    at async Bundler.createAsset (https://deno.land/x/[email protected]/bundler.ts:138:23)
    at async Bundler.createGraph (https://deno.land/x/[email protected]/bundler.ts:218:17)
    at async Bundler.bundle (https://deno.land/x/[email protected]/bundler.ts:480:19)
    at async bundleFunction (https://deno.land/x/[email protected]/cli.ts:190:41)
    at async Command.bundleCommand [as fn] (https://deno.land/x/[email protected]/cli.ts:239:3)

• Deno version 1.10.2
• OS Windows 10

Thanks.

List of features that need to be implemented for V1:
transpile modules

• transpile to esm
• transpile to system
  • included system_loader
• handle dynamically imported modules
• tests
• error handling
  • ts.transpileModule diagnostics
  • read & write files
• array indexes for deps.json entry dependencies to reduce size

  {
    "indexes": {
      "a.ts": 0,
      "b.ts": 1,
    },
    "deps": {
        "a.ts": {
          "path": "src/a.ts",
          "input": "src/a.ts",
          "output": "a.js",
          "modified": 1596665546246,
          "dependencies": [1]
        },
        "b.ts": {
         "path": "src/b.ts",
         "input": "src/b.ts",
         "output": "../b.js",
         "modified": 1596665546347,
         "dependencies": []
       }
  }

How ceate custum plugin ?

Hi there

I'm having some trouble with the css functionality here and decided to try the example.

For me it doesn't seem to be working out of the box. I followed the instructions but I see that in deps there is a single css file that exactly mirrors src/styles.css:

/* @import "h1.css"; */
@import "import.css";

#images {
  display: flex;
  flex-wrap: wrap;
}

This causes the browser to fetch deps/import.css which does not exist. Perhaps the css transform is just not working? Is there something I have to do to enable it?

I also really want to use the css nesting that is advertised to work out of the box but it seems something more fundamental isn't right. Can you reproduce or is it just my set-up?

Using deno 1.9.0.

as you know deno is relatively new technologie.
I prefer to have a clear image about example project stucture just by reading the readme before cloning them in my computer and testing them.

The reason is that in the browser I am forced to use type="module" even though I am not importing or exporting anything.

see

Use indexes instead of paths for dependencies to reduce deps.json size.

example:

{
  "map": {
    "a.ts": 0,
    "b.ts": 1,
  },
  "deps": {
      "a.ts": {
        "path": "src/a.ts",
        "input": "src/a.ts",
        "output": "a.js",
        "modified": 1596665546246,
        "dependencies": [1]
      },
      "b.ts": {
       "path": "src/b.ts",
       "input": "src/b.ts",
       "output": "../b.js",
       "modified": 1596665546347,
       "dependencies": []
     }
}

we need one or more examples of spa that can be runned by spa server cli

There is a bug in version 0.7.*

Lambda using generics are compiled as React Component.

Example

// Original
export const random = (min: number, max: number, float = false) => {
  const val = Math.random() * (max - min) + min;
  if (float) {
    return val;
  }
  return Math.floor(val);
};
export const randomItem = <T, >(list: T[]) => list[random(0, list.length)]

// Compiled

export default (async () => {
    const random = (min, max, float = false) => {
        const val = Math.random() * (max - min) + min;
        if (float) {
            return val;
        }
        return Math.floor(val);
    };
    const randomItem = React.createElement(T, null, "(list: T[]) => list[random(0, list.length)]; return ", (random, randomItem), "; })();");
});

Generic functions don't have the same issue.

When trying to use the CLI on Windows with a relative path, it misunderstands the file path as a URL, failing with a confusing error message.

I think the issue is here

C:\Users\dan\Desktop>deno run -A --unstable https://raw.githubusercontent.com/timreichen/Bundler/restructure/cli.ts bundle ./test.html
file not found: c:\Users\dan\Desktop\test.html
error: Uncaught (in promise) TypeError: scheme 'c' not supported
return await fetch(input)
^
at Object.opSync (deno:core/01_core.js:170:12)
at opFetch (deno:ext/fetch/26_fetch.js:71:17)
at mainFetch (deno:ext/fetch/26_fetch.js:221:61)
at deno:ext/fetch/26_fetch.js:458:11
at new Promise ()
at fetch (deno:ext/fetch/26_fetch.js:425:20)
at HTMLPlugin.readSource (https://raw.githubusercontent.com/timreichen/Bundler/restructure/plugins/file/text_file.ts:16:22)
at HTMLPlugin.createSource (https://raw.githubusercontent.com/timreichen/Bundler/restructure/plugins/plugin.ts:139:31)
at HTMLPlugin.createAsset (https://raw.githubusercontent.com/timreichen/Bundler/restructure/plugins/html/html_plugin.ts:36:31)
at Bundler.createAsset (https://raw.githubusercontent.com/timreichen/Bundler/restructure/bundler.ts:60:36)

create tests for

• loaders
• cache
• dependencies
• plugins
• cli
• examples
• bundler
• graph

How we can create a custom loaders to cover more files (like in webpack)?

we need to be able to specify either system bundling with code splitting or transpiling to esm in cli.
There are multiple possibilities to do so:

• flag
  for example --format system
• subcommand
  for example bundler pack, bundler bundle
• tsconfig.json
  module specification in tsconfig.json "module": "System"

I prefer an additional subcommand.

need to parse imported css to handle imports.

/* otherStyles.css */
h1 {
  color: red;
}

/* styles.css */
@import url("./otherStyles.css")

h2 {
  color: blue;
}

output

// 18a78944-33cf-45c8-a681-18d088e291df.js
import styles from "./cd798a65-0dbf-4d1a-8b30-e17821f6f617.js"
export default `${styles}
h2 {
  color: blue;
}`

// ./cd798a65-0dbf-4d1a-8b30-e17821f6f617.js
export default `h1 {
  color: red;
}`

My index.html file has a script like <script type="module" src="./main.mjs"></script>

Bundler crashes because it can't find a createAsset plugin despite (1) mjs being a fairly common extension for JavaScript module files (2) the type="module" tag, which should identify this as Javascript.

deno run -A --unstable https://deno.land/x/bundler/cli.ts bundle index.html
Entry index.html
Error: No createAsset plugin found: 'main.mjs'
    at Bundler.createAsset (https://deno.land/x/[email protected]/bundler.ts:175:11)
    at async Bundler.createGraph (https://deno.land/x/[email protected]/bundler.ts:251:17)
    at async Bundler.bundle (https://deno.land/x/[email protected]/bundler.ts:621:19)
    at async bundleFunction (https://deno.land/x/[email protected]/cli.ts:38:41)
    at async Command.bundleCommand [as fn] (https://deno.land/x/[email protected]/cli.ts:88:3)

Deno.bundle seems to allow providing direct source strings. I was curious if something like that could be done with this.

I have my own parser/compiler I am building for a template language. And my thought was to pass all script contents that any component used into a Bundler of sorts.

Deno.bundle seems to solve for ES modules, but I am trying to find a solution for legacy browsers, compiling TS, or running Babel.

i try to install with this command:
deno install --unstable --allow-read --allow-write --allow-net --allow-env --name bundler https://deno.land/x/bundler/cli.ts

but got this error:
error: TS2352 [ERROR]: Conversion of type 'string | symbol' to type 'number' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type 'symbol' is not comparable to type 'number'. return getArguments()[prop as number]; ~~~~~~~~~~~~~~ at https://deno.land/[email protected]/node/process.ts:58:27

deno version : 1.8.2
os : fedora 33

ly@ely-ThinkPad-T450s:~/Documents/fontend/deno-frontend/Bundler-master/examples/server$ deno run --unstable --allow-all server.ts
Check file:///home/ely/Documents/fontend/deno-frontend/Bundler-master/examples/server/server.ts
error: TS2345 [ERROR]: Argument of type 'unknown' is not assignable to parameter of type 'boolean | undefined'.
Type 'unknown' is not assignable to type 'true'.
const context = new Context(this, contextRequest, secure);
~~~~~~
at https://deno.land/x/[email protected]/application.ts:407:55
I get above error when I try to run examples/server
I have :
deno 1.11.2 (release, x86_64-unknown-linux-gnu)
v8 9.1.269.35
typescript 4.3.2

Hi, your project is fantastic!
But, I've got this error when I used the jspm.dev CDN

error: Uncaught TypeError: Path must be a string. Received undefined
  CHAR_UPPERCASE_A,
  ^
    at assertPath (https://deno.land/std/path/_util.ts:7:3)
    at join (https://deno.land/std/path/win32.ts:272:5)
    at Bundler.bundle (bundler.ts:212:13)
    at async Command._fn (cli.ts:113:7)

here is an example code

path: src/deps.ts

// @deno-types="https://deno.land/x/types/react/v16.13.1/react.d.ts"
import React from "https://jspm.dev/[email protected]";

// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://jspm.dev/[email protected]/server";

// @deno-types="https://deno.land/x/types/react-dom/v16.13.1/react-dom.d.ts"
import ReactDOM from "https://jspm.dev/[email protected]";


export {
  React,
  ReactDOM,
  ReactDOMServer,
};

path: src/index.tsx

import { React, ReactDOM } from "./deps.ts";

console.log(React, ReactDOM)

and started bundle with this command.

denobundler bundle --name index.js .\src\index.tsx

Thanks :)

Installing bundler I'm getting this error

error: Import 'https://esm.sh/[email protected]?no-check' failed: 500 Internal Server Error