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 ( -
-
{props.children}
-
- ); -} 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 logo + + + React logo + +
+

Farm + React

+
+ +

+ 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 + + + +
+ + + + 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

+
+ +

+ 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 @@ + + + + + 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 @@ - - - - - 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