Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/deckchairlabs/mesozoic
A generic build system for Deno web apps
https://github.com/deckchairlabs/mesozoic
deno javascript no-bundle parcel-css swc typescript web
Last synced: 23 days ago
JSON representation
A generic build system for Deno web apps
- Host: GitHub
- URL: https://github.com/deckchairlabs/mesozoic
- Owner: deckchairlabs
- License: mit
- Created: 2022-08-26T01:38:11.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-28T08:10:00.000Z (over 1 year ago)
- Last Synced: 2024-10-03T12:44:55.008Z (about 1 month ago)
- Topics: deno, javascript, no-bundle, parcel-css, swc, typescript, web
- Language: TypeScript
- Homepage: https://deno.land/x/mesozoic
- Size: 5.6 MB
- Stars: 30
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 🌄 mesozoic
[](https://deno.land/x/mesozoic)
### A generic build system for Deno web apps.
## What does it do?
Mesozoic takes your source files from `root`, copies those source files to `output` (preserving your
project directory structure), transforms your JavaScript/TypeScript with [swc](https://swc.rs/),
transforms your stylesheets with [Lightning CSS](https://lightningcss.dev/) and writes those
resulting transformations to your `output` directory.
## API
You can build your own bespoke build system on top of Mesozoic, which
[Ultra.js](https://ultrajs.dev) is currently doing.
```ts
import { Builder, ContextBuilder } from "https://deno.land/x/[email protected]/mod.ts";
const context = new ContextBuilder()
/**
* The absolute path to the "root" of your project.
*/
.setRoot(import.meta.resolve("./"))
/**
* The absolute path to where you would like the build to output to.
*/
.setOutput(import.meta.resolve("./.output"))
/**
* Ignore files from the build, relative to "root".
* Any file that matches the provided patterns won't be copied to the build output directory.
*/
.ignore(["./README.md"])
/**
* Files which should have their contents hashed and appended to the filename,
* great for long term caching (https://web.dev/use-long-term-caching/)
*/
.contentHash([
"./src/**/*.+(ts|tsx|js|jsx|css)",
"./public/**/*.+(css|ico|jpg|png|svg|gif|otf|ttf|woff)",
])
/**
* Files which should be compiled by SWC, usually TypeScript or files with JSX.
*/
.compile([
"./**/*.+(ts|tsx|js|jsx)",
// We can negate a pattern by prefixing it with "!"
"!./vendor/server/**/*",
])
/**
* Build and validate the context.
*/
.build();
/**
* Create a new builder with the context as defined above.
*/
const builder = new Builder(context, {
/**
* A custom name for your builder!
*/
name: "mesozoic",
logLevel: "INFO",
compilerOptions: {
minify: true,
sourceMaps: false,
jsxImportSource: "react",
},
cssOptions: {
minify: true,
sourceMaps: false,
browserslist: ["chrome 100"],
},
});
/**
* Setup your entrypoints, relative to "root".
* A module graph will be built for each entry point defined.
* Remote dependencies will also be independently fetched and output for each entrypoint.
*
* The key of the entrypoints config is the name of the entrypoint and also the output
* directory name within the vendor output directory.
*/
builder.setEntrypoints({
"browser": {
path: "./client.tsx",
target: "browser",
},
"server": {
path: "./server.tsx",
target: "deno",
},
});
/**
* Clean the output directory
*/
await builder.cleanOutput();
/**
* Gather all source files from the root
*/
const sources = await builder.gatherSources();
/**
* Execute the build
*/
const result = await builder.build(sources);
```