PlumeriaInstallation
It is plumeria's installing, compiler, integration setup
Installing core
The phantom-runtime distribution size is less than 300B for min + brotli.
npm i -D @plumeria/coreyarn add -D @plumeria/corepnpm i -D @plumeria/coreSetup
The plumerialint command installs @plumeria/eslint-plugin.
oxlint is required to run the plumerialint command.
By running it in parallel with the build, errors are detected with zero runtime.
pnpm i -D oxlintFor Next, we recommend running rimraf to clean up the cache to accommodate the differences between versions:
"scripts": {
"predev": "rimraf .next",
"prebuild": "rimraf .next",
"dev": "next dev",
"build": "plumerialint & next build",
"start": "next start",
}, "scripts": {
"dev": "vite",
"build": "plumerialint & tsc -b && vite build",
},Next.js
npm i -D @plumeria/next-plugin @plumeria/postcss-pluginyarn add -D @plumeria/next-plugin @plumeria/postcss-pluginpnpm add -D @plumeria/next-plugin @plumeria/postcss-pluginpostcss.config.js
Reduce build times by narrowing the scope using include and exclude.
/* application root */
module.exports = {
plugins: {
'@plumeria/postcss-plugin': {
// use src directory
include: ['./src/**/*.{ts,tsx}'],
exclude: ['**/node_modules/**', '**/.next/**'],
},
},
};CSS extraction marke
Inclulde css file @plumeria mark.
Atomic css is aggregated at build time into marked css files.
/* app/global.css */
/* import in app/layout.tsx */
@plumeria;
...Turbopack
import type { NextConfig } from "next";
import { withPlumeria } from "@plumeria/next-plugin/turbopack";
const nextConfig: NextConfig = {
/* config options here */
};
export default withPlumeria(nextConfig);Webpack
import type { NextConfig } from "next";
import { withPlumeria } from "@plumeria/next-plugin";
const nextConfig: NextConfig = {
/* turbopack: {} may be required */
};
export default withPlumeria(nextConfig); "dev": "next dev --webpack",
"build": "next build --webpack",Vite
npm i -D @plumeria/vite-pluginyarn add -D @plumeria/vite-pluginpnpm add -D @plumeria/vite-pluginPlace it before any other plugins.
That's all the settings.
vite.config
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { plumeria } from '@plumeria/vite-plugin';
export default defineConfig({
plugins: [react(), plumeria()],
});