farm-fe / farm Goto Github PK
View Code? Open in Web Editor NEWExtremely fast Vite-compatible web build tool written in Rust
Home Page: https://farmfe.org
License: MIT License
Extremely fast Vite-compatible web build tool written in Rust
Home Page: https://farmfe.org
License: MIT License
We want to test Rust compiler, make sure it work as expected. see https://github.com/farm-fe/farm/blob/main/crates/compiler/tests/update.rs
we need helpers functions to help us the compiler, for example:
create a rust compiler
#[test]
fn test() {
let compiler = create_compiler(); // create_compiler is a helper
}
verify the output of the compiler
#[test]
fn test() {
let compiler = create_compiler();
compiler.compile();
expect(compiler, 'output code...'); // expect is a helper
}
Tests to be done:
[ ] HMR update: test the output result when a module change.
[ ] Css parse and codegen
[ ] static assets parse and codegen
[ ] test react/vue examples in headless browser, make sure the output resources of Farm executable
Turbopack is a build tool created by Vercel. It's also written in Rust. How does farm compare with Turbopack?
Create plugin CLI tools to support create, build and publish farm plugins automatically, support both rust plugin and js plugin.
We need:
For example:
farm plugin create <my-plugin>
farm plugin build
farm plugin publish
Web worker usage
new Worker(new URL('./worker.js', import.meta.url));
Problems to resolve:
import React from "react";
import { Description } from "./comps/description";
import "./main.css";
import React from "react";
import { Description } from "./comps/description";
//import "./main.css"; delete this module
Swc has transfomers to do syntax downgrade, polyfill inject
Support css modules. Seems like swc_css has already support css modules. We should take a investigation on it
Background: See exports and import field definition: https://nodejs.org/api/packages.html#modules-packages
relative crate: https://github.com/farm-fe/farm/tree/main/crates/plugin_resolve
Tasks:
[ ] when a package defines exports and imports, using it to resolve the package's entry or remap the import
[ ] add unit test under tests
All other bundlers have sourcemap
enabled in the benchmark, while farm
does not support sourcemap
, which turns out to be very misleading.
Farm aims to provide basic performant compilation support(React tech stack) for web project this year(2022), releasing a stable version which can be used in production.
CI for testing, linting, coverage report, auto release and so on
Test spec for rust and ts
Project Management
Script(js, ts, jsx, tsx
) compilation
jsx/tsx
support react by defaultts/tsx
(without type checking)Css(sass, less, css
) compilation
Html compilation
React compilation
SSR
Optimization
Currently host and port are hard coded, see https://github.com/farm-fe/farm/blob/main/packages/runtime-plugin-hmr/src/index.ts#L9
We should support using the host
and port
from server.hmr
option. The define
option would be helpful
As discussed in #3, Farm will design its own runtime module system to simulate ESM and CommonJS in web browsers, this RFC describes how this module system works.
Support for other module systems, like UMD, SystemJS or AMD, shall be provided by external plugins, Farm itself will not provide now.
In compile time, Farm transforms ESM or CommonJS modules to Farm's standard module, especially, ESM's export
/import
statements will be replaced as they are defined in ECMA specification, leave it as is will lead to runtime errors.
In runtime, Farm manages all modules with runtime code, in general, a farm's module has three stages in its whole lifetime, which are register, load and run.
Farm's module system is composed with two parts:
All modules will be transformed to a CommonJS-like module style:
require('REQUEST')
exports.foo = 1
/ module.exports = {}
/ module.exports = function () {}
ESM modules will be transformed to CommonJS-like module style, import
and export
statements defined in ECMAScript specification will be mapped to CommonJS-like module syntax:
Note:
require
here will be replaced with Farm's actual require implementation of runtime module management.
import
ImportClause FromClause
import foo from 'IDENTIFIER'
-> const { foo } = require('IDENTIFIER')
import * as ns from 'IDENTIFIER'
-> const ns = require('IDENTIFIER')
import { foo, bar } from 'IDENTIFIER'
-> const { foo, bar } = require('IDENTIFIER')
import foo, * as ns from 'IDENTIFIER'
-> const ns = require('IDENTIFIER'); const foo = ns.default
import foo, { foo, bar, baz as z } from 'IDENTIFIER'
-> const { default: foo, foo, bar, baz: z } = require('IDENTIFIER')
import
ModuleSpecifier:
import 'IDENTIFIER'
-> require('IDENTIFIER')
export
ExportFromClause FromClause
export * from 'IDENTIFIER';
ex
from 'IDENTIFIER', module.exports[ex] = require('IDENTIFIER')[ex]
export * as ns from 'IDENTIFIER';
- > exports.ns = require('IDENTIFIER')
export { foo, bar, baz as z} from 'IDENTIFIER';
-> exports.foo = require('IDENTIFIER').foo; exports.bar = require('IDENTIFIER').bar; exports.z = require('IDENTIFIER').baz
export
NamedExports:
export { foo, bar, baz as z };
-> exports.foo = foo; exports.bar = bar; exports.z = baz
export
VariableStatement:
export var baz = 1
-> export.baz = 1
export
Declaration:
export function foo() {}
-> exports.foo = function foo() {}
export function foo* () {}
-> exports.foo= function foo* () {}
export async function foo() {}
-> exports.foo= async function foo() {}
export async function foo* () {}
-> exports.foo= async function foo* () {}
export class foo {}
-> exports.foo= class foo {}
export let foo = 1
-> exports.foo = 1
export let foo, bar, baz = 1
-> exports.foo = undefined; exports.bar = undefined; exports.baz = 1
export const bar = 1
-> exports.bar = 1
export const foo = 1, bar = 1
-> exports.foo = 1; exports.bar = 1
export default
HoistableDeclaration:
export default function foo() {}
-> exports.default= function foo() {}
export default function foo* () {}
-> exports.default= function foo* () {}
export default async function foo() {}
-> exports.default= async function foo() {}
export default async function foo* () {}
-> exports.default= async function foo* () {}
export default
ClassDeclaration:
export default class foo {}
-> exports.default= class foo {}
export default [lookahead โ { function, async [no [LineTerminator](https://tc39.es/ecma262/#prod-LineTerminator) here] function, class }]
AssignmentExpression:
export default foo ? bar : baz
-> exports.default = foo ? bar : baz
export default () => 1
-> exports.default = () => 1
export default async () => 1
-> exports.default = async () => 1
export default a = 1
(where a
is a variable declared with var
or let
) -> exports.default = a = 1
export default a += 1
(where a
is a variable declared with var
or let
, AssignmentExpresssion: one of *= /= %= += -= <<= >>= >>>= &= ^= |= **=
) -> exports.default = a += 1
&&=
AssignmentExpression:
export default a &&= 1
(where a
is a variable declared with var
or let
) -> exports.default = a &&= 1
||=
AssignmentExpression:
export default a ||= 1
(where a
is a variable declared with var
or let
) -> exports.default = a ||= 1
??=
AssignmentExpression:
export default a ??= 1
(where a
is a variable declared with var
or let
) -> exports.default = a ??= 1
Todo
exports
field will be supported later
Integrated embed sass as plugin_sass to support compile .scss
.
Investigate https://crates.io/crates/sass-embedded
moved to farm-fe/rfcs#2
Add plugin json to support compile .json
farm.config.ts
in @farmfe/cli
export default function farmVuePlugin(options: object = {}): JsPlugin {
return {
name: "farm-vue-plugin",
resolve: {
filters: {
importers: [".vue$"],
sources: [".*"],
},
executor(params, ctx) {
console.log("resolve:", params.source);
const { query, filePath } = parsePath(params.source as string);
query.resolvedPath = params.source as string;
console.log("beforeQuery:", query);
return {
external: false,
resolvedPath: filePath,
sideEffects: false,
query,
meta: {},
};
},
},
load: {
filters: {
resolvedPaths: [".vue$"],
},
executor(params, ctx) {
const { resolvedPath, query } = params;
if (query.vue === "true" && query.hash) {
const styleCode = stylesCodeCache[query.hash];
return {
content: typeof styleCode === "string" ? styleCode : "",
moduleType: query.lang,
};
}
let source = "";
try {
source = fs.readFileSync(resolvedPath, "utf-8");
} catch (err) {
error({
id: resolvedPath,
message: "path is not right,can't readFile",
});
}
const { descriptor } = compiler.parse(source);
const { source: mainCode, moduleType } = genMainCode(
descriptor,
resolvedPath
);
return {
content: mainCode,
moduleType,
};
},
},
};
}
Currently Farm only collect Rust code test coverage and report it using codecov. We should support both Rust and Ts coverage report, and report them as single one.
see https://github.com/farm-fe/farm/blob/main/.github/workflows/rust-test.yaml#L40
support source map for sass, less
Support server.middlewares
option in the config to custom dev server middlewares
To verify that our design works and fast.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.