diff --git a/packages/create-vite/src/index.ts b/packages/create-vite/src/index.ts index 1a0a628d6e2956..afc0dbdb973b8f 100755 --- a/packages/create-vite/src/index.ts +++ b/packages/create-vite/src/index.ts @@ -268,6 +268,29 @@ const FRAMEWORKS: Framework[] = [ }, ], }, + { + name: 'marko', + display: 'Marko', + color: magenta, + variants: [ + { + name: 'marko-ts', + display: 'TypeScript', + color: blue, + }, + { + name: 'marko', + display: 'JavaScript', + color: yellow, + }, + { + name: 'custom-marko-run', + display: 'Marko Run ↗', + color: red, + customCommand: 'npm create marko', + }, + ], + }, { name: 'others', display: 'Others', diff --git a/packages/create-vite/template-marko-ts/.vscode/extensions.json b/packages/create-vite/template-marko-ts/.vscode/extensions.json new file mode 100644 index 00000000000000..5fc3d4f5f460a3 --- /dev/null +++ b/packages/create-vite/template-marko-ts/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Marko-JS.marko-vscode"] +} diff --git a/packages/create-vite/template-marko-ts/README.md b/packages/create-vite/template-marko-ts/README.md new file mode 100644 index 00000000000000..e2af7a3fe40246 --- /dev/null +++ b/packages/create-vite/template-marko-ts/README.md @@ -0,0 +1,15 @@ +# Marko + TS + Vite + +This template should help get you started developing with Marko and TypeScript in Vite. + +## Client-side Rendering + +This starter is for a client-only application. Since Marko is at its core a server-first framework, it is recommended to use a server-side rendering setup for production applications. For a full production-ready Marko application, consider using [Marko Run](https://marko.run/). + +## Recommended IDE Setup + +[VS Code](https://code.visualstudio.com/) + [Marko Extension](https://marketplace.visualstudio.com/items?itemName=Marko-JS.marko-vscode). + +## Need an official Marko framework? + +Check out [Marko Run](https://marko.run/), which is also powered by Vite. diff --git a/packages/create-vite/template-marko-ts/_gitignore b/packages/create-vite/template-marko-ts/_gitignore new file mode 100644 index 00000000000000..a547bf36d8d11a --- /dev/null +++ b/packages/create-vite/template-marko-ts/_gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/create-vite/template-marko-ts/index.html b/packages/create-vite/template-marko-ts/index.html new file mode 100644 index 00000000000000..c25f8a936f5ee1 --- /dev/null +++ b/packages/create-vite/template-marko-ts/index.html @@ -0,0 +1,14 @@ + + + + + + + Vite + Marko + TS + + + +
+ + + diff --git a/packages/create-vite/template-marko-ts/package.json b/packages/create-vite/template-marko-ts/package.json new file mode 100644 index 00000000000000..654e0f97f0fd92 --- /dev/null +++ b/packages/create-vite/template-marko-ts/package.json @@ -0,0 +1,19 @@ +{ + "name": "vite-marko-ts-starter", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "check": "mtc" + }, + "devDependencies": { + "@marko/type-check": "^1.3.13", + "@marko/vite": "^5.0.13", + "marko": "^6.0.0-next.3.22", + "typescript": "~5.7.2", + "vite": "^6.0.5" + } +} diff --git a/packages/create-vite/template-marko-ts/public/vite.svg b/packages/create-vite/template-marko-ts/public/vite.svg new file mode 100644 index 00000000000000..e7b8dfb1b2a60b --- /dev/null +++ b/packages/create-vite/template-marko-ts/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/create-vite/template-marko-ts/src/app.marko b/packages/create-vite/template-marko-ts/src/app.marko new file mode 100644 index 00000000000000..9c737207484a32 --- /dev/null +++ b/packages/create-vite/template-marko-ts/src/app.marko @@ -0,0 +1,45 @@ +
+
+ + + + + + +
+

Vite + Marko

+ +
+ +
+ +

+ Check out + + Marko Run + + , the official Marko app framework powered by Vite! +

+ +

+ Click on the Vite and Marko logos to learn more +

+
+ + diff --git a/packages/create-vite/template-marko-ts/src/app.style.css b/packages/create-vite/template-marko-ts/src/app.style.css new file mode 100644 index 00000000000000..617f5e93c0a72d --- /dev/null +++ b/packages/create-vite/template-marko-ts/src/app.style.css @@ -0,0 +1,79 @@ +: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; +} + +a { + font-weight: 500; + color: #646cff; + 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; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +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: #646cff; +} +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: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/packages/create-vite/template-marko-ts/src/assets/marko.svg b/packages/create-vite/template-marko-ts/src/assets/marko.svg new file mode 100644 index 00000000000000..99d73b54154bc3 --- /dev/null +++ b/packages/create-vite/template-marko-ts/src/assets/marko.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/create-vite/template-marko-ts/src/main.ts b/packages/create-vite/template-marko-ts/src/main.ts new file mode 100644 index 00000000000000..732b823ab56157 --- /dev/null +++ b/packages/create-vite/template-marko-ts/src/main.ts @@ -0,0 +1,3 @@ +import app from './app.marko' + +app.mount({}, document.getElementById('app')!) diff --git a/packages/create-vite/template-marko-ts/src/tags/counter.marko b/packages/create-vite/template-marko-ts/src/tags/counter.marko new file mode 100644 index 00000000000000..c63d40fcba5e28 --- /dev/null +++ b/packages/create-vite/template-marko-ts/src/tags/counter.marko @@ -0,0 +1,5 @@ + + + diff --git a/packages/create-vite/template-marko-ts/tsconfig.json b/packages/create-vite/template-marko-ts/tsconfig.json new file mode 100644 index 00000000000000..9879251b11bc25 --- /dev/null +++ b/packages/create-vite/template-marko-ts/tsconfig.json @@ -0,0 +1,20 @@ +{ + "include": ["src/**/*"], + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "lib": ["dom", "ESNext"], + "module": "ESNext", + "moduleResolution": "bundler", + "noEmit": true, + "noImplicitOverride": true, + "noUnusedLocals": true, + "outDir": "dist", + "resolveJsonModule": true, + "skipLibCheck": true, + "strict": true, + "target": "ESNext", + "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo", + "types": ["vite/client"], + "verbatimModuleSyntax": true + } +} diff --git a/packages/create-vite/template-marko-ts/vite.config.ts b/packages/create-vite/template-marko-ts/vite.config.ts new file mode 100644 index 00000000000000..8247c6c69f0c4a --- /dev/null +++ b/packages/create-vite/template-marko-ts/vite.config.ts @@ -0,0 +1,11 @@ +import { defineConfig } from 'vite' +import marko from '@marko/vite' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + marko({ + linked: false, + }), + ], +}) diff --git a/packages/create-vite/template-marko/.vscode/extensions.json b/packages/create-vite/template-marko/.vscode/extensions.json new file mode 100644 index 00000000000000..5fc3d4f5f460a3 --- /dev/null +++ b/packages/create-vite/template-marko/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Marko-JS.marko-vscode"] +} diff --git a/packages/create-vite/template-marko/README.md b/packages/create-vite/template-marko/README.md new file mode 100644 index 00000000000000..e2af7a3fe40246 --- /dev/null +++ b/packages/create-vite/template-marko/README.md @@ -0,0 +1,15 @@ +# Marko + TS + Vite + +This template should help get you started developing with Marko and TypeScript in Vite. + +## Client-side Rendering + +This starter is for a client-only application. Since Marko is at its core a server-first framework, it is recommended to use a server-side rendering setup for production applications. For a full production-ready Marko application, consider using [Marko Run](https://marko.run/). + +## Recommended IDE Setup + +[VS Code](https://code.visualstudio.com/) + [Marko Extension](https://marketplace.visualstudio.com/items?itemName=Marko-JS.marko-vscode). + +## Need an official Marko framework? + +Check out [Marko Run](https://marko.run/), which is also powered by Vite. diff --git a/packages/create-vite/template-marko/_gitignore b/packages/create-vite/template-marko/_gitignore new file mode 100644 index 00000000000000..a547bf36d8d11a --- /dev/null +++ b/packages/create-vite/template-marko/_gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/create-vite/template-marko/index.html b/packages/create-vite/template-marko/index.html new file mode 100644 index 00000000000000..c25f8a936f5ee1 --- /dev/null +++ b/packages/create-vite/template-marko/index.html @@ -0,0 +1,14 @@ + + + + + + + Vite + Marko + TS + + + +
+ + + diff --git a/packages/create-vite/template-marko/jsconfig.json b/packages/create-vite/template-marko/jsconfig.json new file mode 100644 index 00000000000000..7273312cdc4a9f --- /dev/null +++ b/packages/create-vite/template-marko/jsconfig.json @@ -0,0 +1,15 @@ +{ + "include": ["src/**/*"], + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "checkJs": true, + "lib": ["dom", "ESNext"], + "module": "ESNext", + "moduleResolution": "bundler", + "noEmit": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "target": "ESNext", + "types": ["vite/client"] + } +} diff --git a/packages/create-vite/template-marko/package.json b/packages/create-vite/template-marko/package.json new file mode 100644 index 00000000000000..1515fb564129e1 --- /dev/null +++ b/packages/create-vite/template-marko/package.json @@ -0,0 +1,17 @@ +{ + "name": "vite-marko-ts-starter", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "check": "mtc" + }, + "devDependencies": { + "@marko/vite": "^5.0.13", + "marko": "^6.0.0-next.3.22", + "vite": "^6.0.5" + } +} diff --git a/packages/create-vite/template-marko/public/vite.svg b/packages/create-vite/template-marko/public/vite.svg new file mode 100644 index 00000000000000..e7b8dfb1b2a60b --- /dev/null +++ b/packages/create-vite/template-marko/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/create-vite/template-marko/src/app.marko b/packages/create-vite/template-marko/src/app.marko new file mode 100644 index 00000000000000..9c737207484a32 --- /dev/null +++ b/packages/create-vite/template-marko/src/app.marko @@ -0,0 +1,45 @@ +
+
+ + + + + + +
+

Vite + Marko

+ +
+ +
+ +

+ Check out + + Marko Run + + , the official Marko app framework powered by Vite! +

+ +

+ Click on the Vite and Marko logos to learn more +

+
+ + diff --git a/packages/create-vite/template-marko/src/app.style.css b/packages/create-vite/template-marko/src/app.style.css new file mode 100644 index 00000000000000..617f5e93c0a72d --- /dev/null +++ b/packages/create-vite/template-marko/src/app.style.css @@ -0,0 +1,79 @@ +: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; +} + +a { + font-weight: 500; + color: #646cff; + 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; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +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: #646cff; +} +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: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/packages/create-vite/template-marko/src/assets/marko.svg b/packages/create-vite/template-marko/src/assets/marko.svg new file mode 100644 index 00000000000000..99d73b54154bc3 --- /dev/null +++ b/packages/create-vite/template-marko/src/assets/marko.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/create-vite/template-marko/src/main.js b/packages/create-vite/template-marko/src/main.js new file mode 100644 index 00000000000000..8d2e3db6045283 --- /dev/null +++ b/packages/create-vite/template-marko/src/main.js @@ -0,0 +1,3 @@ +import app from './app.marko' + +app.mount({}, document.getElementById('app')) diff --git a/packages/create-vite/template-marko/src/tags/counter.marko b/packages/create-vite/template-marko/src/tags/counter.marko new file mode 100644 index 00000000000000..c63d40fcba5e28 --- /dev/null +++ b/packages/create-vite/template-marko/src/tags/counter.marko @@ -0,0 +1,5 @@ + + + diff --git a/packages/create-vite/template-marko/vite.config.js b/packages/create-vite/template-marko/vite.config.js new file mode 100644 index 00000000000000..8247c6c69f0c4a --- /dev/null +++ b/packages/create-vite/template-marko/vite.config.js @@ -0,0 +1,11 @@ +import { defineConfig } from 'vite' +import marko from '@marko/vite' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + marko({ + linked: false, + }), + ], +})