diff --git a/.changeset/curvy-grapes-sing.md b/.changeset/curvy-grapes-sing.md
new file mode 100644
index 000000000..ba9e26c0f
--- /dev/null
+++ b/.changeset/curvy-grapes-sing.md
@@ -0,0 +1,5 @@
+---
+'create-farm': patch
+---
+
+update template add solid template
diff --git a/cspell.json b/cspell.json
index 81ec05e93..d72deff29 100644
--- a/cspell.json
+++ b/cspell.json
@@ -92,7 +92,8 @@
"pluginutils",
"picomatch",
"rsplit",
- "unwatch"
+ "unwatch",
+ "Avenir"
],
"ignorePaths": [
"pnpm-lock.yaml",
diff --git a/packages/create-farm/index.ts b/packages/create-farm/index.ts
index 04d40b55f..8f011535b 100644
--- a/packages/create-farm/index.ts
+++ b/packages/create-farm/index.ts
@@ -84,7 +84,8 @@ async function createFarm() {
title: chalk.blue('React'),
value: 'react'
},
- { title: chalk.green('Vue'), value: 'vue' }
+ { title: chalk.green('Vue'), value: 'vue' },
+ { title: chalk.blueBright('Solid'), value: 'solid' }
]
},
{
diff --git a/packages/create-farm/package.json b/packages/create-farm/package.json
index 006ebafa9..da4492abc 100644
--- a/packages/create-farm/package.json
+++ b/packages/create-farm/package.json
@@ -12,7 +12,7 @@
},
"scripts": {
"build": "farm build",
- "watch": "farm watch",
+ "dev": "farm watch",
"prepublishOnly": "npm run build"
},
"author": "",
diff --git a/packages/create-farm/templates/react/assets/feature.svg b/packages/create-farm/templates/react/assets/feature.svg
deleted file mode 100644
index a59e16c0e..000000000
--- a/packages/create-farm/templates/react/assets/feature.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/create-farm/templates/react/assets/light.svg b/packages/create-farm/templates/react/assets/light.svg
deleted file mode 100644
index cea5580df..000000000
--- a/packages/create-farm/templates/react/assets/light.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/create-farm/templates/react/assets/logo.png b/packages/create-farm/templates/react/assets/logo.png
deleted file mode 100644
index 67112a5ca..000000000
Binary files a/packages/create-farm/templates/react/assets/logo.png and /dev/null differ
diff --git a/packages/create-farm/templates/react/assets/plugin.svg b/packages/create-farm/templates/react/assets/plugin.svg
deleted file mode 100644
index ca89a86a6..000000000
--- a/packages/create-farm/templates/react/assets/plugin.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/create-farm/templates/react/package.json b/packages/create-farm/templates/react/package.json
index bca60d6c6..b992e90c5 100644
--- a/packages/create-farm/templates/react/package.json
+++ b/packages/create-farm/templates/react/package.json
@@ -9,7 +9,7 @@
},
"devDependencies": {
"@farmfe/cli": "^0.5.5",
- "@farmfe/core": "^0.10.1",
+ "@farmfe/core": "^0.10.6",
"@farmfe/plugin-react": "^0.2.0",
"@types/react": "18",
"@types/react-dom": "18",
diff --git a/packages/create-farm/templates/react/src/assets/logo.png b/packages/create-farm/templates/react/src/assets/logo.png
new file mode 100644
index 000000000..0caeb4381
Binary files /dev/null and b/packages/create-farm/templates/react/src/assets/logo.png differ
diff --git a/packages/create-farm/templates/react/src/assets/react.svg b/packages/create-farm/templates/react/src/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/packages/create-farm/templates/react/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-farm/templates/react/src/components/button/index.css b/packages/create-farm/templates/react/src/components/button/index.css
deleted file mode 100644
index 5a40cbeb1..000000000
--- a/packages/create-farm/templates/react/src/components/button/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.farm-button {
- background-color: #9f1a8f;
- color: #fff;
- padding: 10px 40px;
- border-radius: 5px;
- margin-right: 20px;
- text-decoration: none;
-}
-
-.farm-button:hover {
- background-color: #bf1aaf;
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
-}
\ No newline at end of file
diff --git a/packages/create-farm/templates/react/src/components/button/index.tsx b/packages/create-farm/templates/react/src/components/button/index.tsx
deleted file mode 100644
index 91fa88416..000000000
--- a/packages/create-farm/templates/react/src/components/button/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import './index.css';
-
-export function ButtonAction(props: PropsWithChildren<{ to: string }>) {
- return (
-
- {props.children}
-
- );
-}
diff --git a/packages/create-farm/templates/react/src/components/card/index.css b/packages/create-farm/templates/react/src/components/card/index.css
deleted file mode 100644
index 0e4bfc3a5..000000000
--- a/packages/create-farm/templates/react/src/components/card/index.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.card {
- border: none;
- outline: none;
- cursor: pointer;
- position: relative;
- z-index: 0;
- border-radius: 10px;
- box-sizing: content-box;
- width: 100%;
- color: var(--color-text);
- background: var(--color-background) !important;
-}
-.card-content {
- padding: 1.25rem;
-}
-.card:hover:before {
- content: '';
- background: linear-gradient(45deg, #8d0c67, #710a4e, #550834, #39051b);
- position: absolute;
- top: -2px;
- left: -2px;
- background-size: 400%;
- z-index: -1;
- filter: blur(5px);
- width: calc(100% + 8px);
- height: calc(100% + 8px);
- animation: glowing 20s linear infinite;
- opacity: 1;
- transition: opacity 0.3s ease-in-out;
- border-radius: 10px;
- transition: all 0.1s ease-in;
-}
-
-.card:after {
- z-index: -1;
- content: '';
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- border-radius: 10px;
- box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
-}
-
-.card:hover:after {
- background: var(--accent-background-card-gradient);
-}
-
-@keyframes glowing {
- 0% {
- background-position: 0 0;
- }
-
- 50% {
- background-position: 400% 0;
- }
-
- 100% {
- background-position: 0 0;
- }
-}
diff --git a/packages/create-farm/templates/react/src/components/card/index.tsx b/packages/create-farm/templates/react/src/components/card/index.tsx
deleted file mode 100644
index 6d5837d54..000000000
--- a/packages/create-farm/templates/react/src/components/card/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import './index.css';
-
-export function FarmCard(props: PropsWithChildren) {
- return (
-
- );
-}
diff --git a/packages/create-farm/templates/react/src/components/index.ts b/packages/create-farm/templates/react/src/components/index.ts
deleted file mode 100644
index 0924c1f8f..000000000
--- a/packages/create-farm/templates/react/src/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './welcome/index';
diff --git a/packages/create-farm/templates/react/src/components/welcome/index.css b/packages/create-farm/templates/react/src/components/welcome/index.css
deleted file mode 100644
index 62b5cf9ba..000000000
--- a/packages/create-farm/templates/react/src/components/welcome/index.css
+++ /dev/null
@@ -1,98 +0,0 @@
-.main-content {
- font-weight: bold;
- font-size: 28px;
- background: var(--accent-gradient);
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- color: transparent;
- background-size: 400%;
- background-position: 0%;
-}
-.action-box {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 40px;
- height: 100%;
-}
-.action {
- display: flex;
- gap: 40px;
-}
-.farm-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- height: 100%;
- align-items: center;
- padding: 0rem 1rem;
- gap: 1.7rem;
-}
-.farm-desc {
- display: flex;
- justify-content: space-between;
- gap: 32px;
-}
-
-.container-box {
- display: flex;
- align-items: center;
- gap: 2rem;
-}
-.container-box img {
- width: 70px;
- height: 70px;
-}
-.farm-desc-left {
- display: flex;
- flex-direction: column;
- gap: 20px;
-}
-
-.main-desc {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 10px;
-}
-
-.rich-desc,
-.fast-desc,
-.fully-desc {
- display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-.sub-title {
- font-size: 1.25rem;
- font-weight: 600;
-}
-
-.logo {
- width: 450px;
-}
-
-.img {
- width: 100px;
- height: 100px;
-}
-
-@media (max-width: 1760px) {
- .farm-desc {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 32px;
- }
- .farm-container {
- width: 60vw;
- }
-}
-
-@media (max-width: 640px) {
- .farm-container {
- width: 100vw;
- }
-}
diff --git a/packages/create-farm/templates/react/src/components/welcome/index.tsx b/packages/create-farm/templates/react/src/components/welcome/index.tsx
deleted file mode 100644
index 078c2e7d3..000000000
--- a/packages/create-farm/templates/react/src/components/welcome/index.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import { FarmCard } from '../card/index';
-import { ButtonAction } from '../button/index';
-import feature from '../../../assets/feature.svg';
-import logo from '../../../assets/logo.png';
-import light from '../../../assets/light.svg';
-import plugin from '../../../assets/plugin.svg';
-import './index.css';
-
-export function Welcome() {
- return (
-
-
-
-
-
- Get started With
- React + Farm
-
-
- Super fast web building tool written in Rust.
-
-
-
-
-
-
-
-
-
- Rich Features
-
- Farm support compiling Html, Css, Js/Jsx/Ts/Tsx, Static Assets
- natively, support lazy compiling, partial bundling and more.
-
-
-
-
-
-
-
-
-
- Fully Pluggable
-
- Everything inside Farm is powered by plugins, you can
- achieve anything you want by writing a plugin. Support both
- Rust and Js plugins.
-
-
-
-
-
-
-
-
-
-
-
- Super Fast
-
- Farm's compiler is written in Rust, with multi-threading,
- lazy/asynchronous compilation and persist caching, Farm can
- start a project in milliseconds, perform a HMR update within
- 10ms.
-
-
-
-
-
- Quick Start
-
-
- Why Farm ?
-
-
-
-
-
-
- );
-}
diff --git a/packages/create-farm/templates/react/src/index.css b/packages/create-farm/templates/react/src/index.css
new file mode 100644
index 000000000..6cc4daf98
--- /dev/null
+++ b/packages/create-farm/templates/react/src/index.css
@@ -0,0 +1,69 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #9f1a8f;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #9f1a8f;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #9f1a8f;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #9F1A8F;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/packages/create-farm/templates/react/src/index.tsx b/packages/create-farm/templates/react/src/index.tsx
index f9062de2d..06a4dd2db 100644
--- a/packages/create-farm/templates/react/src/index.tsx
+++ b/packages/create-farm/templates/react/src/index.tsx
@@ -1,6 +1,8 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Main } from './main';
+import './index.css'
+
const container = document.querySelector('#root');
const root = createRoot(container);
diff --git a/packages/create-farm/templates/react/src/main.css b/packages/create-farm/templates/react/src/main.css
index 7a6e15797..ff29d4128 100644
--- a/packages/create-farm/templates/react/src/main.css
+++ b/packages/create-farm/templates/react/src/main.css
@@ -1,106 +1,42 @@
-:root {
- --accent: 113, 26, 95;
- --vt-c-white: #ffffff;
-
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
- --farm-brand-color: #710a4e;
- --farm-brand-soft: #9f1a8f;
- --farm-brand-white: #ffffff;
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
- --accent-gradient: linear-gradient(
- 45deg,
- rgb(var(--accent)),
- #fda7df 30%,
- var(--color-background) 40%
- );
- --accent-background-gradient: linear-gradient(
- 45deg,
- rgb(var(--accent)),
- #fda7df 30%,
- var(--color-background) 40%
- );
- --accent-background-card-gradient: linear-gradient(
- 45deg,
- rgb(var(--accent)),
- #fda7df 10%,
- var(--color-background) 40%
- );
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
}
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
- --color-button: var(--farm-brand-soft);
- --farm-brand-white: var(--vt-c-white);
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
- --color-button: var(--vt-c-black);
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
+.logo:hover {
+ filter: drop-shadow(0 0 2em #9F1A8Faa);
}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- position: relative;
- font-weight: normal;
+.logo.react:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
}
-body {
- min-height: 100vh;
- color: var(--color-text);
- display: flex;
- background: var(--color-background);
- transition: color 0.5s, background-color 0.5s;
- text-rendering: optimizeLegibility;
+@keyframes logo-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
}
-h2 {
- margin: 15px;
+@media (prefers-reduced-motion: no-preference) {
+ a:nth-of-type(2) .logo {
+ animation: logo-spin infinite 20s linear;
+ }
}
-h1 {
- margin: 0;
+.card {
+ padding: 2em;
}
-#root {
- font-size: 18px;
- display: flex;
- justify-content: center;
- max-width: 1280px;
- margin: 0 auto;
- font-weight: normal;
+.read-the-docs {
+ color: #888;
}
diff --git a/packages/create-farm/templates/react/src/main.tsx b/packages/create-farm/templates/react/src/main.tsx
index 71a49cfb6..dde461b8a 100644
--- a/packages/create-farm/templates/react/src/main.tsx
+++ b/packages/create-farm/templates/react/src/main.tsx
@@ -1,11 +1,32 @@
-import React from 'react';
-import { Welcome } from './components/index';
-import './main.css';
-
+import React, { useState } from "react";
+import "./main.css";
+import reactLogo from "./assets/react.svg";
+import FarmLogo from "./assets/logo.png";
export function Main() {
+ const [count, setCount] = useState(0);
+
return (
<>
-
+
+ Farm + React
+
+
setCount((count) => count + 1)}>
+ count is {count}
+
+
+ Edit src/main.tsx
and save to test HMR
+
+
+
+ Click on the Farm and React logos to learn more
+
>
);
}
diff --git a/packages/create-farm/templates/react/src/typings.d.ts b/packages/create-farm/templates/react/src/typings.d.ts
index c0fd7c5fc..fa0a2da54 100644
--- a/packages/create-farm/templates/react/src/typings.d.ts
+++ b/packages/create-farm/templates/react/src/typings.d.ts
@@ -1,2 +1,3 @@
declare module '*.svg';
+declare module '*.png';
declare module '*.css';
diff --git a/packages/create-farm/templates/solid/.eslintrc.json b/packages/create-farm/templates/solid/.eslintrc.json
new file mode 100644
index 000000000..5b9d8f126
--- /dev/null
+++ b/packages/create-farm/templates/solid/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+ "root": true,
+ "extends": "../../.eslintrc.base.json",
+ "parserOptions": {
+ "project": ["./examples/solid/tsconfig.json"]
+ },
+ "rules": {}
+}
diff --git a/packages/create-farm/templates/solid/farm.config.mjs b/packages/create-farm/templates/solid/farm.config.mjs
new file mode 100644
index 000000000..6aed21f62
--- /dev/null
+++ b/packages/create-farm/templates/solid/farm.config.mjs
@@ -0,0 +1,18 @@
+import { defineFarmConfig } from '@farmfe/core/config';
+import farmJsPluginSolid from '@farmfe/js-plugin-solid';
+
+export default defineFarmConfig({
+ compilation: {
+ mode: process.env.NODE_ENV,
+ input: {
+ index: 'index.html'
+ },
+ output: {
+ path: 'build'
+ },
+ define: {
+ __DEV__: 'true'
+ }
+ },
+ plugins: [farmJsPluginSolid()]
+});
diff --git a/packages/create-farm/templates/solid/index.html b/packages/create-farm/templates/solid/index.html
new file mode 100644
index 000000000..bed2a733c
--- /dev/null
+++ b/packages/create-farm/templates/solid/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+ Solid App
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
+
diff --git a/packages/create-farm/templates/solid/package.json b/packages/create-farm/templates/solid/package.json
new file mode 100644
index 000000000..c6a777443
--- /dev/null
+++ b/packages/create-farm/templates/solid/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "@farmfe-examples/solid",
+ "version": "0.0.1",
+ "private": true,
+ "dependencies": {
+ "solid-js": "^1.7.6"
+ },
+ "devDependencies": {
+ "@farmfe/cli": "^0.5.5",
+ "@farmfe/core": "^0.10.6",
+ "@farmfe/js-plugin-solid": "^1.0.2"
+ },
+ "scripts": {
+ "start": "farm start",
+ "build": "farm build",
+ "preview": "farm preview"
+ }
+}
diff --git a/packages/create-farm/templates/solid/src/App.css b/packages/create-farm/templates/solid/src/App.css
new file mode 100644
index 000000000..8939833e4
--- /dev/null
+++ b/packages/create-farm/templates/solid/src/App.css
@@ -0,0 +1,27 @@
+#root {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+.logo {
+ height: 6em;
+ padding: 1.5em;
+ will-change: filter;
+ transition: filter 300ms;
+}
+.logo:hover {
+ filter: drop-shadow(0 0 2em #9F1A8Faa);
+}
+.logo.solid:hover {
+ filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.card {
+ padding: 2em;
+}
+
+.read-the-docs {
+ color: #888;
+}
diff --git a/packages/create-farm/templates/solid/src/App.tsx b/packages/create-farm/templates/solid/src/App.tsx
new file mode 100644
index 000000000..498e89572
--- /dev/null
+++ b/packages/create-farm/templates/solid/src/App.tsx
@@ -0,0 +1,35 @@
+import { createSignal } from "solid-js";
+import solidLogo from "./assets/solid.svg";
+import farmLogo from "./assets/logo.png";
+import "./App.css";
+
+function App() {
+ const [count, setCount] = createSignal(0);
+
+ return (
+ <>
+
+ Farm + Solid
+
+
setCount((count) => count + 1)}>
+ count is {count()}
+
+
+ Edit src/App.tsx
and save to test HMR
+
+
+
+ Click on the Farm and Solid logos to learn more
+
+ >
+ );
+}
+
+export default App;
diff --git a/packages/create-farm/templates/solid/src/assets/logo.png b/packages/create-farm/templates/solid/src/assets/logo.png
new file mode 100644
index 000000000..0caeb4381
Binary files /dev/null and b/packages/create-farm/templates/solid/src/assets/logo.png differ
diff --git a/packages/create-farm/templates/solid/src/assets/solid.svg b/packages/create-farm/templates/solid/src/assets/solid.svg
new file mode 100644
index 000000000..025aa303c
--- /dev/null
+++ b/packages/create-farm/templates/solid/src/assets/solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-farm/templates/solid/src/env.d.ts b/packages/create-farm/templates/solid/src/env.d.ts
new file mode 100644
index 000000000..98c8255da
--- /dev/null
+++ b/packages/create-farm/templates/solid/src/env.d.ts
@@ -0,0 +1,25 @@
+declare const __DEV__: boolean;
+declare module '*.svg' {
+ const src: string;
+ export default src;
+}
+declare module '*.png' {
+ const src: string;
+ export default src;
+}
+declare module '*.module.css' {
+ const styles: Record;
+ export default styles;
+}
+declare module '*.module.sass' {
+ const styles: Record;
+ export default styles;
+}
+declare module '*.module.scss' {
+ const styles: Record;
+ export default styles;
+}
+declare module '*.module.less' {
+ const styles: Record;
+ export default styles;
+}
diff --git a/packages/create-farm/templates/solid/src/index.css b/packages/create-farm/templates/solid/src/index.css
new file mode 100644
index 000000000..1382a18fe
--- /dev/null
+++ b/packages/create-farm/templates/solid/src/index.css
@@ -0,0 +1,69 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #9F1A8F;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #9F1A8F;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #9F1A8F;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/packages/create-farm/templates/solid/src/index.tsx b/packages/create-farm/templates/solid/src/index.tsx
new file mode 100644
index 000000000..af7bf042c
--- /dev/null
+++ b/packages/create-farm/templates/solid/src/index.tsx
@@ -0,0 +1,9 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import App from './App'
+
+const root = document.getElementById('root')
+
+render(() => , root!)
diff --git a/packages/create-farm/templates/solid/tsconfig.json b/packages/create-farm/templates/solid/tsconfig.json
new file mode 100644
index 000000000..512ddd749
--- /dev/null
+++ b/packages/create-farm/templates/solid/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": {
+ "target": "ESNext",
+ "module": "ESNext",
+ "moduleResolution": "node",
+ "noEmit": true,
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
+ },
+ "include": ["src", "farm.config.mjs"]
+}
diff --git a/packages/create-farm/templates/vue/assets/feature.svg b/packages/create-farm/templates/vue/assets/feature.svg
deleted file mode 100644
index a59e16c0e..000000000
--- a/packages/create-farm/templates/vue/assets/feature.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/create-farm/templates/vue/assets/light.svg b/packages/create-farm/templates/vue/assets/light.svg
deleted file mode 100644
index cea5580df..000000000
--- a/packages/create-farm/templates/vue/assets/light.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/create-farm/templates/vue/assets/logo.png b/packages/create-farm/templates/vue/assets/logo.png
deleted file mode 100644
index 67112a5ca..000000000
Binary files a/packages/create-farm/templates/vue/assets/logo.png and /dev/null differ
diff --git a/packages/create-farm/templates/vue/assets/plugin.svg b/packages/create-farm/templates/vue/assets/plugin.svg
deleted file mode 100644
index ca89a86a6..000000000
--- a/packages/create-farm/templates/vue/assets/plugin.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/create-farm/templates/vue/package.json b/packages/create-farm/templates/vue/package.json
index 2bc45e378..1c88a6264 100644
--- a/packages/create-farm/templates/vue/package.json
+++ b/packages/create-farm/templates/vue/package.json
@@ -8,7 +8,7 @@
},
"devDependencies": {
"@farmfe/cli": "^0.5.5",
- "@farmfe/core": "^0.10.1",
+ "@farmfe/core": "^0.10.6",
"@farmfe/js-plugin-vue": "^1.2.8"
},
"scripts": {
@@ -16,4 +16,4 @@
"build": "farm build",
"preview": "farm preview"
}
-}
\ No newline at end of file
+}
diff --git a/packages/create-farm/templates/vue/src/App.vue b/packages/create-farm/templates/vue/src/App.vue
new file mode 100644
index 000000000..329d90f99
--- /dev/null
+++ b/packages/create-farm/templates/vue/src/App.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
diff --git a/packages/create-farm/templates/vue/src/Main.vue b/packages/create-farm/templates/vue/src/Main.vue
deleted file mode 100644
index 715fb1644..000000000
--- a/packages/create-farm/templates/vue/src/Main.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
-
-
-
diff --git a/packages/create-farm/templates/vue/src/assets/logo.png b/packages/create-farm/templates/vue/src/assets/logo.png
new file mode 100644
index 000000000..0caeb4381
Binary files /dev/null and b/packages/create-farm/templates/vue/src/assets/logo.png differ
diff --git a/packages/create-farm/templates/vue/src/assets/vue.svg b/packages/create-farm/templates/vue/src/assets/vue.svg
new file mode 100644
index 000000000..770e9d333
--- /dev/null
+++ b/packages/create-farm/templates/vue/src/assets/vue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/packages/create-farm/templates/vue/src/base.css b/packages/create-farm/templates/vue/src/base.css
deleted file mode 100644
index 28623a46d..000000000
--- a/packages/create-farm/templates/vue/src/base.css
+++ /dev/null
@@ -1,97 +0,0 @@
-:root {
- --accent: 113, 26, 95;
- --vt-c-white: #ffffff;
-
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
- --farm-brand-color: #710a4e;
- --farm-brand-soft: #9f1a8f;
- --farm-brand-white: #ffffff;
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
- --accent-gradient: linear-gradient(
- 45deg,
- rgb(var(--accent)),
- #fda7df 30%,
- var(--color-background) 40%
- );
- --accent-background-gradient: linear-gradient(
- 45deg,
- rgb(var(--accent)),
- #fda7df 30%,
- var(--color-background) 40%
- );
- --accent-background-card-gradient: linear-gradient(
- 45deg,
- rgb(var(--accent)),
- #fda7df 10%,
- var(--color-background) 40%
- );
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
- --color-button: var(--farm-brand-soft);
- --farm-brand-white: var(--vt-c-white);
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
- --color-button: var(--vt-c-black);
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- position: relative;
- font-weight: normal;
-}
-
-body {
- min-height: 100vh;
- color: var(--color-text);
- display: flex;
- background: var(--color-background);
- transition: color 0.5s, background-color 0.5s;
- text-rendering: optimizeLegibility;
-}
-
-h2 {
- margin: 15px;
-}
-
-h1 {
- margin: 0;
-}
diff --git a/packages/create-farm/templates/vue/src/components/Button.vue b/packages/create-farm/templates/vue/src/components/Button.vue
deleted file mode 100644
index b7fa5577c..000000000
--- a/packages/create-farm/templates/vue/src/components/Button.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/packages/create-farm/templates/vue/src/components/Card.vue b/packages/create-farm/templates/vue/src/components/Card.vue
deleted file mode 100644
index 889a07601..000000000
--- a/packages/create-farm/templates/vue/src/components/Card.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-
-
-
-
-
diff --git a/packages/create-farm/templates/vue/src/components/HelloWorld.vue b/packages/create-farm/templates/vue/src/components/HelloWorld.vue
new file mode 100644
index 000000000..7135f2b54
--- /dev/null
+++ b/packages/create-farm/templates/vue/src/components/HelloWorld.vue
@@ -0,0 +1,32 @@
+
+
+
+ {{ msg }}
+
+
+
count is {{ count }}
+
+ Edit
+ components/HelloWorld.vue
to test HMR
+
+
+
+
+ Install
+ Volar
+ in your IDE for a better DX
+
+ Click on the Farm and Vue logos to learn more
+
+
+
diff --git a/packages/create-farm/templates/vue/src/components/Welcome.vue b/packages/create-farm/templates/vue/src/components/Welcome.vue
deleted file mode 100644
index 13eb4effe..000000000
--- a/packages/create-farm/templates/vue/src/components/Welcome.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-
-
-
-
-
-
- Get started With
- Vue + Farm
-
-
- Super fast web building tool written in Rust.
-
-
-
-
-
-
-
-
-
- Rich Features
-
- Farm support compiling Html, Css, Js/Jsx/Ts/Tsx, Static Assets
- natively, support lazy compiling, partial bundling and
- more.
-
-
-
-
-
-
-
-
- Fully Pluggable
-
- Everything inside Farm is powered by plugins, you can achieve
- anything you want by writing a plugin. Support both Rust and
- Js plugins.
-
-
-
-
-
-
-
-
-
-
- Super Fast
-
- Farm's compiler is written in Rust, with multi-threading,
- lazy/asynchronous compilation and persist caching, Farm can
- start a project in milliseconds, perform a HMR update within
- 10ms.
-
-
-
- Quick Start
- Why Farm ?
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/create-farm/templates/vue/src/index.ts b/packages/create-farm/templates/vue/src/index.ts
index 4cc7d1b40..2425c0f74 100644
--- a/packages/create-farm/templates/vue/src/index.ts
+++ b/packages/create-farm/templates/vue/src/index.ts
@@ -1,4 +1,5 @@
-import { createApp } from 'vue';
-import Main from './Main.vue';
-import './base.css';
-createApp(Main).mount('#app');
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/packages/create-farm/templates/vue/src/style.css b/packages/create-farm/templates/vue/src/style.css
new file mode 100644
index 000000000..6efbecc02
--- /dev/null
+++ b/packages/create-farm/templates/vue/src/style.css
@@ -0,0 +1,80 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+a {
+ font-weight: 500;
+ color: #9F1A8F;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #9F1A8F;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+ padding: 2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #9F1A8F;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a9bb2e95..b54c26269 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
settings:
autoInstallPeers: false