diff options
24 files changed, 793 insertions, 0 deletions
diff --git a/packages/bun-plugin-css/README.md b/packages/bun-plugin-css/README.md new file mode 100644 index 000000000..9abf5f6c0 --- /dev/null +++ b/packages/bun-plugin-css/README.md @@ -0,0 +1,3 @@ +# `bun-plugin-css` + +Not implemented. diff --git a/packages/bun-plugin-css/index.ts b/packages/bun-plugin-css/index.ts new file mode 100644 index 000000000..bf67f6e7e --- /dev/null +++ b/packages/bun-plugin-css/index.ts @@ -0,0 +1 @@ +throw new Error("Not implemented."); diff --git a/packages/bun-plugin-css/package.json b/packages/bun-plugin-css/package.json new file mode 100644 index 000000000..68b4020d9 --- /dev/null +++ b/packages/bun-plugin-css/package.json @@ -0,0 +1,10 @@ +{ + "name": "bun-plugin-css", + "version": "0.0.1-alpha.0", + "module": "index.ts", + "type": "module", + "files": [ + "index.ts", + "package.json" + ] +} diff --git a/packages/bun-plugin-lightningcss/README.md b/packages/bun-plugin-lightningcss/README.md new file mode 100644 index 000000000..7cbe8c64b --- /dev/null +++ b/packages/bun-plugin-lightningcss/README.md @@ -0,0 +1,3 @@ +# `bun-plugin-lightningcss` + +Not implemented. diff --git a/packages/bun-plugin-lightningcss/index.ts b/packages/bun-plugin-lightningcss/index.ts new file mode 100644 index 000000000..bf67f6e7e --- /dev/null +++ b/packages/bun-plugin-lightningcss/index.ts @@ -0,0 +1 @@ +throw new Error("Not implemented."); diff --git a/packages/bun-plugin-lightningcss/package.json b/packages/bun-plugin-lightningcss/package.json new file mode 100644 index 000000000..6aafdedd1 --- /dev/null +++ b/packages/bun-plugin-lightningcss/package.json @@ -0,0 +1,10 @@ +{ + "name": "bun-plugin-lightningcss", + "version": "0.0.1-alpha.0", + "module": "index.ts", + "type": "module", + "files": [ + "index.ts", + "package.json" + ] +} diff --git a/packages/bun-plugin-mdx/README.md b/packages/bun-plugin-mdx/README.md new file mode 100644 index 000000000..65890d7c2 --- /dev/null +++ b/packages/bun-plugin-mdx/README.md @@ -0,0 +1,3 @@ +# `bun-plugin-mdx` + +Not implemented. diff --git a/packages/bun-plugin-mdx/index.ts b/packages/bun-plugin-mdx/index.ts new file mode 100644 index 000000000..bf67f6e7e --- /dev/null +++ b/packages/bun-plugin-mdx/index.ts @@ -0,0 +1 @@ +throw new Error("Not implemented."); diff --git a/packages/bun-plugin-mdx/package.json b/packages/bun-plugin-mdx/package.json new file mode 100644 index 000000000..98047872f --- /dev/null +++ b/packages/bun-plugin-mdx/package.json @@ -0,0 +1,10 @@ +{ + "name": "bun-plugin-mdx", + "version": "0.0.1-alpha.0", + "module": "index.ts", + "type": "module", + "files": [ + "index.ts", + "package.json" + ] +} diff --git a/packages/bun-plugin-server-components/.gitignore b/packages/bun-plugin-server-components/.gitignore new file mode 100644 index 000000000..f81d56eaa --- /dev/null +++ b/packages/bun-plugin-server-components/.gitignore @@ -0,0 +1,169 @@ +# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore + +# Logs + +logs +_.log +npm-debug.log_ +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) + +report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json + +# Runtime data + +pids +_.pid +_.seed +\*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover + +lib-cov + +# Coverage directory used by tools like istanbul + +coverage +\*.lcov + +# nyc test coverage + +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) + +.grunt + +# Bower dependency directory (https://bower.io/) + +bower_components + +# node-waf configuration + +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) + +build/Release + +# Dependency directories + +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) + +web_modules/ + +# TypeScript cache + +\*.tsbuildinfo + +# Optional npm cache directory + +.npm + +# Optional eslint cache + +.eslintcache + +# Optional stylelint cache + +.stylelintcache + +# Microbundle cache + +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history + +.node_repl_history + +# Output of 'npm pack' + +\*.tgz + +# Yarn Integrity file + +.yarn-integrity + +# dotenv environment variable files + +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) + +.cache +.parcel-cache + +# Next.js build output + +.next +out + +# Nuxt.js build / generate output + +.nuxt +dist + +# Gatsby files + +.cache/ + +# Comment in the public line in if your project uses Gatsby and not Next.js + +# https://nextjs.org/blog/next-9-1#public-directory-support + +# public + +# vuepress build output + +.vuepress/dist + +# vuepress v2.x temp and cache directory + +.temp +.cache + +# Docusaurus cache and generated files + +.docusaurus + +# Serverless directories + +.serverless/ + +# FuseBox cache + +.fusebox/ + +# DynamoDB Local files + +.dynamodb/ + +# TernJS port file + +.tern-port + +# Stores VSCode versions used for testing VSCode extensions + +.vscode-test + +# yarn v2 + +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.\* diff --git a/packages/bun-plugin-server-components/README.md b/packages/bun-plugin-server-components/README.md new file mode 100644 index 000000000..32ce31fed --- /dev/null +++ b/packages/bun-plugin-server-components/README.md @@ -0,0 +1,149 @@ +# `bun-plugin-server-components` + +The official Bun plugin for **server components**. + +## Installation + +```sh +bun add bun-plugin-server-components -d +``` + +## Context + +Server components are a new abstraction for building web applications. They look similar to standard React/JSX components, but render exclusively on the server. They differ from classic "client components" in a few ways: + +1. They can be `async`. +2. Their implementation can run privileged code like database queries. Normally this would be unsafe, because the source code of client components are typically bundled and sent to the client, where they can be inspected and reverse-engineered. Server components are never sent to the client, so they can run privileged code safely. +3. They _cannot_ contain stateful hooks like `useState` or `useEffect`. + +Server components require a deep integration with the bundler to work. To understand why, we need a bit of background on how server components work. + +### How server components work + +Imagine you have a server component that looks like this: + +```tsx +// index.tsx +import { Component } from "./Component"; +export default async function HomePage() { + return ( + <div> + <Component /> + </div> + ); +} +``` + +This file imports a client component called `Component`. + +```ts +// ./Component.tsx +"use client"; + +export function Component() { + return <div>Hello world</div>; +} +``` + +To run this component we need to generate two builds. + +> Here the term "build" refers to a typical bundling step—the act of converting a set of entrypoints into a set of bundles. + +1. The first is our "server component build". It contains all the code we need to render `HomePage` to a component tree. When an incoming `Request` comes in, we can use React's built-in tools to convert this tree into a "virtual DOM stream" that we can return as a `Response`. +2. The second is our "client build". It contains the bundled versions of all client components that were referenced by our server components. + +The browser hits the server and gets back the "virtual DOM stream". The virtual DOM stream will contain references to client components, which will be loaded from the client bundle. React provides a built-in utility (`createFromFetch`)that accepts the VDOM stream, dynamically loads the necessary client components, and returns a renderable component. + +```ts +import { createRoot } from "react-dom/client"; +import { createFromFetch } from "react-server-dom-webpack/client.browser"; + +const stream = fetch("/", { headers: { Accept: "text/x-component" } }); +const data = createFromFetch(stream); + +const root = createRoot(document); +root.render(<App />); +``` + +### Server-side rendering + +One potentially confusing aspect of server components is that they "return" virtual DOM. From the perspective of a server component, client components are black boxes. + +If we want to do server-side rendering, we need to render our server component to VDOM, _then_ render the VDOM to plain HTML. These are two distinct steps. The second step requires a _third build_, we we'll call the "SSR build". Like the "client build", this build will bundle all the client components. Unlike the "client build", those bundles will be intended for consumption on the server; in bundler terms, the build's `"target"` will be`"bun"` (or perhaps `"node"`). + +### Bundling server components + +That's a high-level overview of how server components work. The important takeaway is that we need to generate totally separate bundles for server and client components. + +But it's not just a simple matter of running two separate bundling scripts. The true "entrypoints" of our application are the server components. Over the course of bundling our server components, we will discover some files containing the `"use client"` directive; these files then become the entrypoints for our "client build", which will require a totally separate build configuration from the server build. + +The goal of this plugin is to hide the complexty of this multi-stage build from the user. + +## Usage + +To use this plugin: + +```ts +import ServerComponentsPlugin from "bun-plugin-server-components"; + +await Bun.build({ + entrypoints: ["./index.tsx"], // server component files + plugins: [ + ServerComponentsPlugin({ + // plugin configuration + }), + ], + // other configuration +}); +``` + +The `"entrypoints"` you pass into `Bun.build()` should be your _server components_. Bun's bundler will automatically detect any files containing the `"use client"` directive, and will use those files as entrypoints for the "client build" and "SSR build". The bundler configuration for these builds can be provided `client` and `ssr` keys respectively. + +```ts +import ServerComponentsPlugin from "bun-plugin-server-components"; + +await Bun.build({ + entrypoints: ["./index.tsx"], // server component files + outdir: "./build", + manifest: true, + plugins: [ServerComponentsPlugin({ + client: { + entrypoints: [], // optional - additional client entrypoints + outdir: "./build/client", // default: inherits from the main build + target: "browser", + plugins: [/* */], + } + ssr: { + entrypoints: [], // optional - additional SSR entrypoints + outdir: "./build/client", // default: inherits from the main build + target: "bun", // this is default + plugins: [/* */], + } + })], +}); +``` + +The result of `Bun.build()` will contain additional manifests for the SSR and client builds. + +```ts +const result = await Bun.build({ + // config + plugins: [ + ServerComponentsPlugin({ + /* config */ + }), + ], +}); + +// standard manifest +// for the top-level (server components) build +result.manifest; + +// manifest for client build +result.clientManifest; + +// manifest for client build +result.ssrManifest; +``` + +Once the build is complete, use the manifests to implement your RSC server. diff --git a/packages/bun-plugin-server-components/bun.lockb b/packages/bun-plugin-server-components/bun.lockb Binary files differnew file mode 100755 index 000000000..11f1e921f --- /dev/null +++ b/packages/bun-plugin-server-components/bun.lockb diff --git a/packages/bun-plugin-server-components/index.ts b/packages/bun-plugin-server-components/index.ts new file mode 100644 index 000000000..6c9dca94f --- /dev/null +++ b/packages/bun-plugin-server-components/index.ts @@ -0,0 +1,10 @@ +import { BunPlugin, BuildConfig } from "bun"; + +function Plugin(config: { client?: BuildConfig; ssr?: BuildConfig }): BunPlugin { + return { + name: "bun-plugin-yaml", + SECRET_SERVER_COMPONENTS_INTERNALS: config, + } as any; +} + +export default Plugin; diff --git a/packages/bun-plugin-server-components/package.json b/packages/bun-plugin-server-components/package.json new file mode 100644 index 000000000..9d28f36fd --- /dev/null +++ b/packages/bun-plugin-server-components/package.json @@ -0,0 +1,28 @@ +{ + "name": "bun-plugin-server-components", + "version": "0.0.1-alpha.0", + "module": "index.ts", + "type": "module", + "types": "index.ts", + "exports": { + ".": { + "import": "./index.ts", + "require": "./index.ts", + "default": "./index.js" + }, + "./package.json": "./package.json" + }, + "files": [ + "index.ts", + "tsconfig.json", + "package.json", + "modules.d.ts" + ], + "devDependencies": { + "@types/js-yaml": "^4.0.5" + }, + "dependencies": { + "bun-types": "canary", + "js-yaml": "^4.1.0" + } +} diff --git a/packages/bun-plugin-server-components/tsconfig.json b/packages/bun-plugin-server-components/tsconfig.json new file mode 100644 index 000000000..910d88534 --- /dev/null +++ b/packages/bun-plugin-server-components/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "lib": [ + "ESNext" + ], + "module": "esnext", + "target": "esnext", + "moduleResolution": "bundler", + "moduleDetection": "force", + "allowImportingTsExtensions": true, + "strict": true, + "downlevelIteration": true, + "skipLibCheck": true, + "jsx": "react-jsx", + "allowSyntheticDefaultImports": true, + "forceConsistentCasingInFileNames": true, + "allowJs": true, + "types": [ + "bun-types" // add Bun global + ] + }, + "include": [ + "**/*.ts", + "modules.d.ts" + ] +}
\ No newline at end of file diff --git a/packages/bun-plugin-yaml/.gitignore b/packages/bun-plugin-yaml/.gitignore new file mode 100644 index 000000000..f81d56eaa --- /dev/null +++ b/packages/bun-plugin-yaml/.gitignore @@ -0,0 +1,169 @@ +# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore + +# Logs + +logs +_.log +npm-debug.log_ +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) + +report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json + +# Runtime data + +pids +_.pid +_.seed +\*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover + +lib-cov + +# Coverage directory used by tools like istanbul + +coverage +\*.lcov + +# nyc test coverage + +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) + +.grunt + +# Bower dependency directory (https://bower.io/) + +bower_components + +# node-waf configuration + +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) + +build/Release + +# Dependency directories + +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) + +web_modules/ + +# TypeScript cache + +\*.tsbuildinfo + +# Optional npm cache directory + +.npm + +# Optional eslint cache + +.eslintcache + +# Optional stylelint cache + +.stylelintcache + +# Microbundle cache + +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history + +.node_repl_history + +# Output of 'npm pack' + +\*.tgz + +# Yarn Integrity file + +.yarn-integrity + +# dotenv environment variable files + +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) + +.cache +.parcel-cache + +# Next.js build output + +.next +out + +# Nuxt.js build / generate output + +.nuxt +dist + +# Gatsby files + +.cache/ + +# Comment in the public line in if your project uses Gatsby and not Next.js + +# https://nextjs.org/blog/next-9-1#public-directory-support + +# public + +# vuepress build output + +.vuepress/dist + +# vuepress v2.x temp and cache directory + +.temp +.cache + +# Docusaurus cache and generated files + +.docusaurus + +# Serverless directories + +.serverless/ + +# FuseBox cache + +.fusebox/ + +# DynamoDB Local files + +.dynamodb/ + +# TernJS port file + +.tern-port + +# Stores VSCode versions used for testing VSCode extensions + +.vscode-test + +# yarn v2 + +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.\* diff --git a/packages/bun-plugin-yaml/README.md b/packages/bun-plugin-yaml/README.md new file mode 100644 index 000000000..556a67bba --- /dev/null +++ b/packages/bun-plugin-yaml/README.md @@ -0,0 +1,75 @@ +# `bun-plugin-yaml` + +The official YAML plugin for Bun. Adds support for `.yml`/`.yaml` imports. + +## Installation + +```sh +bun add bun-plugin-yaml -d +``` + +## Bundler usage + +This plugin can be used to support `.yaml` loaders in Bun's bundler by passing it into the `plugins` array: + +```ts +import yamlPlugin from "bun-plugin-yaml"; + +Bun.build({ + entrypoints: ["./index.tsx"], + // other config + + plugins: [yamlPlugin()], +}); +``` + +You can now import `.yaml` files from your source code: + +```ts +import data from "./data.yaml"; + +export function Component() { + return <div>{data.name}</div>; +} +``` + +The contents of the `.yaml` file will be inlined into your bundle. + +## Runtime usage + +To use as a runtime plugin, create a file that registers the plugin: + +```ts +// yaml.ts +import yamlPlugin from "bun-plugin-yaml"; + +Bun.plugin(yamlPlugin()); +``` + +Then preload it in your `bunfig.toml`: + +```toml +preload = ["./yaml.ts"] +``` + +## TypeScript + +By default VSCode/TypeScript will not recognize `.yaml` imports. To avoid import errors, add the following to your `tsconfig.json`: + +```json-diff + { + "compilerOptions": { + "types": [ + // other packages, e.g. "bun-types", ++ "bun-plugin-yaml" + ] + } + } +``` + +## Contributing + +```bash +$ bun install # project setup +$ bun test # run tests +``` diff --git a/packages/bun-plugin-yaml/bun.lockb b/packages/bun-plugin-yaml/bun.lockb Binary files differnew file mode 100755 index 000000000..3741a88cf --- /dev/null +++ b/packages/bun-plugin-yaml/bun.lockb diff --git a/packages/bun-plugin-yaml/data.yml b/packages/bun-plugin-yaml/data.yml new file mode 100644 index 000000000..e9b361450 --- /dev/null +++ b/packages/bun-plugin-yaml/data.yml @@ -0,0 +1,20 @@ +# example yaml data +--- +doe: "a deer, a female deer" +ray: "a drop of golden sun" +pi: 3.14159 +xmas: true +french-hens: 3 +calling-birds: + - huey + - dewey + - louie + - fred +xmas-fifth-day: + calling-birds: four + french-hens: 3 + golden-rings: 5 + partridges: + count: 1 + location: "a pear tree" + turtle-doves: two diff --git a/packages/bun-plugin-yaml/index.test.ts b/packages/bun-plugin-yaml/index.test.ts new file mode 100644 index 000000000..e8a41b822 --- /dev/null +++ b/packages/bun-plugin-yaml/index.test.ts @@ -0,0 +1,21 @@ +import { test, expect } from "bun:test"; +import YamlPlugin from "."; +import data from "./data.yml"; + +test("yaml loader - no plugin", async () => { + expect(async () => { + await import("./data.yml"); + }).toThrow(); +}); + +test("yaml loader", async () => { + const plugin = YamlPlugin(); + Bun.plugin(plugin); + const { default: mod } = await import("./data.yml"); + + expect(mod.doe).toEqual("a deer, a female deer"); + expect(mod.ray).toEqual("a drop of golden sun"); + expect(mod.pi).toEqual(3.14159); + + Bun.plugin.clearAll(); +}); diff --git a/packages/bun-plugin-yaml/index.ts b/packages/bun-plugin-yaml/index.ts new file mode 100644 index 000000000..e8b2ae6cd --- /dev/null +++ b/packages/bun-plugin-yaml/index.ts @@ -0,0 +1,21 @@ +import { BunPlugin } from "bun"; +import { readFileSync } from "fs"; +import { load } from "js-yaml"; + +function YamlPlugin(): BunPlugin { + return { + name: "bun-plugin-yaml", + setup(builder) { + builder.onLoad({ filter: /\.(yaml|yml)$/ }, args => { + const text = readFileSync(args.path, "utf8"); + const exports = load(text) as Record<string, any>; + return { + exports, + loader: "object", + }; + }); + }, + }; +} + +export default YamlPlugin; diff --git a/packages/bun-plugin-yaml/modules.d.ts b/packages/bun-plugin-yaml/modules.d.ts new file mode 100644 index 000000000..e4e55fd6a --- /dev/null +++ b/packages/bun-plugin-yaml/modules.d.ts @@ -0,0 +1,8 @@ +declare module "*.yml" { + const content: any; + export default content; +} +declare module "*.yaml" { + const content: any; + export default content; +} diff --git a/packages/bun-plugin-yaml/package.json b/packages/bun-plugin-yaml/package.json new file mode 100644 index 000000000..b9f79395d --- /dev/null +++ b/packages/bun-plugin-yaml/package.json @@ -0,0 +1,29 @@ +{ + "name": "bun-plugin-yaml", + "version": "0.0.1", + "module": "index.ts", + "type": "module", + "types": "index.ts", + "exports": { + ".": { + "import": "./index.ts", + "require": "./index.ts", + "default": "./index.js", + "types": "./modules.d.ts" + }, + "./package.json": "./package.json" + }, + "files": [ + "index.ts", + "tsconfig.json", + "package.json", + "modules.d.ts" + ], + "devDependencies": { + "@types/js-yaml": "^4.0.5", + "bun-types": "canary" + }, + "dependencies": { + "js-yaml": "^4.1.0" + } +} diff --git a/packages/bun-plugin-yaml/tsconfig.json b/packages/bun-plugin-yaml/tsconfig.json new file mode 100644 index 000000000..910d88534 --- /dev/null +++ b/packages/bun-plugin-yaml/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "lib": [ + "ESNext" + ], + "module": "esnext", + "target": "esnext", + "moduleResolution": "bundler", + "moduleDetection": "force", + "allowImportingTsExtensions": true, + "strict": true, + "downlevelIteration": true, + "skipLibCheck": true, + "jsx": "react-jsx", + "allowSyntheticDefaultImports": true, + "forceConsistentCasingInFileNames": true, + "allowJs": true, + "types": [ + "bun-types" // add Bun global + ] + }, + "include": [ + "**/*.ts", + "modules.d.ts" + ] +}
\ No newline at end of file |