Code Monkey home page Code Monkey logo

mesozoic's Introduction

๐ŸŒ„ mesozoic

GitHub Workflow Status Deno module Deno compatibility

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, transforms your stylesheets with Lightning CSS 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 is currently doing.

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);

mesozoic's People

Contributors

deckchairlabs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

ahuigo danielduel

mesozoic's Issues

vendoring a skypark dependency

I wonder if you could please help me diagnose a problem I am having vendoring a package?

I am building an application that has a skypark dependency for graphql-type-json.

    "graphql-type-json": "https://cdn.skypack.dev/[email protected]?dts",

The app builds ok but when running the application against the compiled source, I get this error:

error: Expected a JavaScript or TypeScript module, but identified a Unknown module. Importing these types of modules is currently not supported.
Specifier: file:///Users/paulcowan/projects/graphgen/server/.ultra/vendor/server/cdn.skypack.dev/[email protected]
at file:///Users/paulcowan/projects/graphgen/server/.ultra/src/graphql/schema.35f27db4.js:1:72

Looking at the generate importMap.server.json it is creating an entry for graphql-type-json with no file extension:

"graphql-type-json": "./vendor/server/cdn.skypack.dev/[email protected]",

And looking at the file system, it is generating a file with no file extension:

js

Looking at the output, it is actually creating files with no .js extension:

Add root alias to fixture

Using root alias with Ultra build which uses mesozoic causes problems:
`/~/` alias + build => Module not found on runtime | issue #290 | ultra:
entries for paths with aliases not created in .ultra/importMap.browser.json and importMap.server.json at all!

Please add root alias to fixture and resolve build errors.

For example:

importMap.json:

{
  "imports": {
       "/~/": "/src/",
   }
}

client.tsx, server.tsx:

replace

import App from "./src/app.tsx" with import App from "/~/app.tsx".

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.