From 29f8b259a06bb62e612dfbed52b01d3c559dae18 Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Tue, 17 Jan 2023 18:28:51 -0500 Subject: [PATCH 01/20] WIP: add Marko --- .vscode/settings.json | 3 ++ README.md | 37 +++++++++++++++++ .../1-declare-state/marko/Name.marko | 2 + .../2-update-state/marko/Name.marko | 3 ++ .../3-computed-state/marko/DoubleCount.marko | 3 ++ .../1-minimal-template/marko/HelloWorld.marko | 1 + .../2-styling/marko/CssStyle.marko | 8 ++++ .../2-templating/3-loop/marko/Colors.marko | 5 +++ .../4-event-click/marko/Counter.marko | 3 ++ .../5-dom-ref/marko/InputFocused.marko | 2 + .../6-conditional/marko/TrafficLight.marko | 17 ++++++++ .../1-on-mount/marko/PageTitle.marko | 3 ++ .../3-lifecycle/2-on-unmount/marko/Time.marko | 6 +++ .../1-props/marko/App.marko | 6 +++ .../1-props/marko/UserProfile.marko | 18 ++++++++ .../2-emit-to-parent/marko/AnswerButton.marko | 7 ++++ .../2-emit-to-parent/marko/App.marko | 7 ++++ .../3-slot/marko/App.marko | 1 + .../3-slot/marko/FunnyButton.marko | 14 +++++++ .../4-slot-fallback/marko/App.marko | 2 + .../4-slot-fallback/marko/FunnyButton.marko | 16 ++++++++ .../5-context/marko/App.marko | 14 +++++++ .../5-context/marko/UserProfile.marko | 9 ++++ .../1-input-text/marko/InputHello.marko | 3 ++ .../2-checkbox/marko/IsAvailable.marko | 5 +++ .../6-form-input/3-radio/marko/PickPill.marko | 22 ++++++++++ .../4-select/marko/ColorSelect.marko | 15 +++++++ .../1-render-app/marko/App.marko | 1 + .../1-render-app/marko/index.marko | 4 ++ .../2-fetch-data/marko/App.marko | 18 ++++++++ frameworks.mjs | 20 +++++++++ public/framework/marko.svg | 41 +++++++++++++++++++ 32 files changed, 316 insertions(+) create mode 100644 content/1-reactivity/1-declare-state/marko/Name.marko create mode 100644 content/1-reactivity/2-update-state/marko/Name.marko create mode 100644 content/1-reactivity/3-computed-state/marko/DoubleCount.marko create mode 100644 content/2-templating/1-minimal-template/marko/HelloWorld.marko create mode 100644 content/2-templating/2-styling/marko/CssStyle.marko create mode 100644 content/2-templating/3-loop/marko/Colors.marko create mode 100644 content/2-templating/4-event-click/marko/Counter.marko create mode 100644 content/2-templating/5-dom-ref/marko/InputFocused.marko create mode 100644 content/2-templating/6-conditional/marko/TrafficLight.marko create mode 100644 content/3-lifecycle/1-on-mount/marko/PageTitle.marko create mode 100644 content/3-lifecycle/2-on-unmount/marko/Time.marko create mode 100644 content/4-component-composition/1-props/marko/App.marko create mode 100644 content/4-component-composition/1-props/marko/UserProfile.marko create mode 100644 content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko create mode 100644 content/4-component-composition/2-emit-to-parent/marko/App.marko create mode 100644 content/4-component-composition/3-slot/marko/App.marko create mode 100644 content/4-component-composition/3-slot/marko/FunnyButton.marko create mode 100644 content/4-component-composition/4-slot-fallback/marko/App.marko create mode 100644 content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko create mode 100644 content/4-component-composition/5-context/marko/App.marko create mode 100644 content/4-component-composition/5-context/marko/UserProfile.marko create mode 100644 content/6-form-input/1-input-text/marko/InputHello.marko create mode 100644 content/6-form-input/2-checkbox/marko/IsAvailable.marko create mode 100644 content/6-form-input/3-radio/marko/PickPill.marko create mode 100644 content/6-form-input/4-select/marko/ColorSelect.marko create mode 100644 content/7-webapp-features/1-render-app/marko/App.marko create mode 100644 content/7-webapp-features/1-render-app/marko/index.marko create mode 100644 content/7-webapp-features/2-fetch-data/marko/App.marko create mode 100644 public/framework/marko.svg diff --git a/.vscode/settings.json b/.vscode/settings.json index 9efb6a04..c652a8e3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,5 +4,8 @@ "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"], "[svelte]": { "editor.defaultFormatter": "svelte.svelte-vscode" + }, + "[svg]": { + "editor.defaultFormatter": "jock.svg" } } diff --git a/README.md b/README.md index 6be5bd81..6d4695b4 100644 --- a/README.md +++ b/README.md @@ -418,6 +418,43 @@ How do we solve this ? Developers love having framework overview by examples. It - [x] Router link - [x] Routing +
+ + + Marko + 92% progress + +- [x] Reactivity + - [x] Declare state + - [x] Update state + - [x] Computed state +- [x] Templating + - [x] Minimal template + - [x] Styling + - [x] Loop + - [x] Event click + - [x] Dom ref + - [x] Conditional +- [x] Lifecycle + - [x] On mount + - [x] On unmount +- [x] Component composition + - [x] Props + - [x] Emit to parent + - [x] Slot + - [x] Slot fallback + - [x] Context +- [x] Form input + - [x] Input text + - [x] Checkbox + - [x] Radio + - [x] Select +- [x] Webapp features + - [x] Render app + - [x] Fetch data + - [ ] Router link + - [ ] Routing +
## 🤝 Contributing diff --git a/content/1-reactivity/1-declare-state/marko/Name.marko b/content/1-reactivity/1-declare-state/marko/Name.marko new file mode 100644 index 00000000..81e05194 --- /dev/null +++ b/content/1-reactivity/1-declare-state/marko/Name.marko @@ -0,0 +1,2 @@ + +

Hello ${name}

diff --git a/content/1-reactivity/2-update-state/marko/Name.marko b/content/1-reactivity/2-update-state/marko/Name.marko new file mode 100644 index 00000000..8cc3af05 --- /dev/null +++ b/content/1-reactivity/2-update-state/marko/Name.marko @@ -0,0 +1,3 @@ + + +

Hello ${name}

\ No newline at end of file diff --git a/content/1-reactivity/3-computed-state/marko/DoubleCount.marko b/content/1-reactivity/3-computed-state/marko/DoubleCount.marko new file mode 100644 index 00000000..6cda1076 --- /dev/null +++ b/content/1-reactivity/3-computed-state/marko/DoubleCount.marko @@ -0,0 +1,3 @@ + + +
${doubleCount}
diff --git a/content/2-templating/1-minimal-template/marko/HelloWorld.marko b/content/2-templating/1-minimal-template/marko/HelloWorld.marko new file mode 100644 index 00000000..159202e8 --- /dev/null +++ b/content/2-templating/1-minimal-template/marko/HelloWorld.marko @@ -0,0 +1 @@ +

Hello world

diff --git a/content/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko new file mode 100644 index 00000000..12f4f521 --- /dev/null +++ b/content/2-templating/2-styling/marko/CssStyle.marko @@ -0,0 +1,8 @@ +I am red + + + \ No newline at end of file diff --git a/content/2-templating/3-loop/marko/Colors.marko b/content/2-templating/3-loop/marko/Colors.marko new file mode 100644 index 00000000..1e5420f1 --- /dev/null +++ b/content/2-templating/3-loop/marko/Colors.marko @@ -0,0 +1,5 @@ +
    + +
  • ${color}
    • + +
diff --git a/content/2-templating/4-event-click/marko/Counter.marko b/content/2-templating/4-event-click/marko/Counter.marko new file mode 100644 index 00000000..83d71fe5 --- /dev/null +++ b/content/2-templating/4-event-click/marko/Counter.marko @@ -0,0 +1,3 @@ + +

Counter: ${count}

+ diff --git a/content/2-templating/5-dom-ref/marko/InputFocused.marko b/content/2-templating/5-dom-ref/marko/InputFocused.marko new file mode 100644 index 00000000..f8b73c57 --- /dev/null +++ b/content/2-templating/5-dom-ref/marko/InputFocused.marko @@ -0,0 +1,2 @@ + + diff --git a/content/2-templating/6-conditional/marko/TrafficLight.marko b/content/2-templating/6-conditional/marko/TrafficLight.marko new file mode 100644 index 00000000..570ae11b --- /dev/null +++ b/content/2-templating/6-conditional/marko/TrafficLight.marko @@ -0,0 +1,17 @@ +static const TRAFFIC_LIGHTS = ["red", "orange", "green"]; + + + + +

Light is: ${light}

+

+ You must + STOP + SLOW DOWN + GO +

diff --git a/content/3-lifecycle/1-on-mount/marko/PageTitle.marko b/content/3-lifecycle/1-on-mount/marko/PageTitle.marko new file mode 100644 index 00000000..85f48e34 --- /dev/null +++ b/content/3-lifecycle/1-on-mount/marko/PageTitle.marko @@ -0,0 +1,3 @@ + + +

Page title is: ${pageTitle}

diff --git a/content/3-lifecycle/2-on-unmount/marko/Time.marko b/content/3-lifecycle/2-on-unmount/marko/Time.marko new file mode 100644 index 00000000..c8471dea --- /dev/null +++ b/content/3-lifecycle/2-on-unmount/marko/Time.marko @@ -0,0 +1,6 @@ + + time = new Date()), 1000) } + onDestroy () { clearInterval(this.timer) } +}/> +

Current time: ${time.toLocaleTimeString()}

diff --git a/content/4-component-composition/1-props/marko/App.marko b/content/4-component-composition/1-props/marko/App.marko new file mode 100644 index 00000000..f164ff2d --- /dev/null +++ b/content/4-component-composition/1-props/marko/App.marko @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/content/4-component-composition/1-props/marko/UserProfile.marko b/content/4-component-composition/1-props/marko/UserProfile.marko new file mode 100644 index 00000000..adc8302c --- /dev/null +++ b/content/4-component-composition/1-props/marko/UserProfile.marko @@ -0,0 +1,18 @@ +export interface Input { + name: string; + age: number | void; + favouriteColors: string[]; + isAvailable: boolean; +} + + + +

My name is ${name}!

+

My age is ${age}!

+

My favourite colors are ${favouriteColors.join(", ")}!

+

I am ${isAvailable ? "available" : "not available"}

diff --git a/content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko b/content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko new file mode 100644 index 00000000..84e0c534 --- /dev/null +++ b/content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko @@ -0,0 +1,7 @@ +export interface Input { + onYes: function; + onNo: function; +} + + + diff --git a/content/4-component-composition/2-emit-to-parent/marko/App.marko b/content/4-component-composition/2-emit-to-parent/marko/App.marko new file mode 100644 index 00000000..43b3ce16 --- /dev/null +++ b/content/4-component-composition/2-emit-to-parent/marko/App.marko @@ -0,0 +1,7 @@ + +

Are you happy?

+ +

${isHappy ? "😀" : "😥"}

diff --git a/content/4-component-composition/3-slot/marko/App.marko b/content/4-component-composition/3-slot/marko/App.marko new file mode 100644 index 00000000..63cea083 --- /dev/null +++ b/content/4-component-composition/3-slot/marko/App.marko @@ -0,0 +1 @@ +Click me! diff --git a/content/4-component-composition/3-slot/marko/FunnyButton.marko b/content/4-component-composition/3-slot/marko/FunnyButton.marko new file mode 100644 index 00000000..0c1ff6db --- /dev/null +++ b/content/4-component-composition/3-slot/marko/FunnyButton.marko @@ -0,0 +1,14 @@ + diff --git a/content/4-component-composition/4-slot-fallback/marko/App.marko b/content/4-component-composition/4-slot-fallback/marko/App.marko new file mode 100644 index 00000000..b1436e7a --- /dev/null +++ b/content/4-component-composition/4-slot-fallback/marko/App.marko @@ -0,0 +1,2 @@ + +I got content! diff --git a/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko new file mode 100644 index 00000000..f558610b --- /dev/null +++ b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko @@ -0,0 +1,16 @@ + diff --git a/content/4-component-composition/5-context/marko/App.marko b/content/4-component-composition/5-context/marko/App.marko new file mode 100644 index 00000000..3694c90a --- /dev/null +++ b/content/4-component-composition/5-context/marko/App.marko @@ -0,0 +1,14 @@ + + +function updateUsername(newUsername) { + user = { ...user, username: newUsername }; +} + +

Welcome back, ${user.username}

+ + + diff --git a/content/4-component-composition/5-context/marko/UserProfile.marko b/content/4-component-composition/5-context/marko/UserProfile.marko new file mode 100644 index 00000000..5729377e --- /dev/null +++ b/content/4-component-composition/5-context/marko/UserProfile.marko @@ -0,0 +1,9 @@ + +
+

My Profile

+

Username: ${username}

+

Email: ${email}

+ +
diff --git a/content/6-form-input/1-input-text/marko/InputHello.marko b/content/6-form-input/1-input-text/marko/InputHello.marko new file mode 100644 index 00000000..308d854f --- /dev/null +++ b/content/6-form-input/1-input-text/marko/InputHello.marko @@ -0,0 +1,3 @@ + +

${text}

+ diff --git a/content/6-form-input/2-checkbox/marko/IsAvailable.marko b/content/6-form-input/2-checkbox/marko/IsAvailable.marko new file mode 100644 index 00000000..5257ec92 --- /dev/null +++ b/content/6-form-input/2-checkbox/marko/IsAvailable.marko @@ -0,0 +1,5 @@ + + diff --git a/content/6-form-input/3-radio/marko/PickPill.marko b/content/6-form-input/3-radio/marko/PickPill.marko new file mode 100644 index 00000000..b9e66f47 --- /dev/null +++ b/content/6-form-input/3-radio/marko/PickPill.marko @@ -0,0 +1,22 @@ +function handleChange (event) { + picked = event.target.value; +} + + + +
Picked: ${picked}
+ + + + + diff --git a/content/6-form-input/4-select/marko/ColorSelect.marko b/content/6-form-input/4-select/marko/ColorSelect.marko new file mode 100644 index 00000000..fae2dc06 --- /dev/null +++ b/content/6-form-input/4-select/marko/ColorSelect.marko @@ -0,0 +1,15 @@ + + + + diff --git a/content/7-webapp-features/1-render-app/marko/App.marko b/content/7-webapp-features/1-render-app/marko/App.marko new file mode 100644 index 00000000..159202e8 --- /dev/null +++ b/content/7-webapp-features/1-render-app/marko/App.marko @@ -0,0 +1 @@ +

Hello world

diff --git a/content/7-webapp-features/1-render-app/marko/index.marko b/content/7-webapp-features/1-render-app/marko/index.marko new file mode 100644 index 00000000..75bc3eaf --- /dev/null +++ b/content/7-webapp-features/1-render-app/marko/index.marko @@ -0,0 +1,4 @@ + + + + diff --git a/content/7-webapp-features/2-fetch-data/marko/App.marko b/content/7-webapp-features/2-fetch-data/marko/App.marko new file mode 100644 index 00000000..6d1e7df1 --- /dev/null +++ b/content/7-webapp-features/2-fetch-data/marko/App.marko @@ -0,0 +1,18 @@ + res.json()))> + <@placeholder> +

Fetching users...

+ + <@catch|error|> +

An error occured while fetching users

+ + <@then|{ results: users }|> +
    + +
  • + user +

    ${name.first} ${name.last}

    +
    • + +
+ + diff --git a/frameworks.mjs b/frameworks.mjs index fba15e07..272e0bda 100644 --- a/frameworks.mjs +++ b/frameworks.mjs @@ -251,4 +251,24 @@ export default [ return sortAllFilenames(files, ["app.html", "app.ts"]); }, }, + { + id: "marko", + title: "Marko", + img: "framework/marko.svg", + eslint: { + env: { + browser: true, + es2021: true, + node: true, + }, + parser: "@typescript-eslint/parser", + files: ["**/marko/**"], + extends: ["eslint:recommended"], + }, + playgroundURL: "https://markojs.com/playground/", + documentationURL: "https://markojs.com/docs/getting-started/", + filesSorter(files) { + return sortAllFilenames(files, ["app.marko"]); + }, + }, ]; diff --git a/public/framework/marko.svg b/public/framework/marko.svg new file mode 100644 index 00000000..18597e6d --- /dev/null +++ b/public/framework/marko.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 4152564a2ee0b050e9b1e02b5d43799b2322d417 Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Tue, 17 Jan 2023 18:30:27 -0500 Subject: [PATCH 02/20] WTF, vscode --- .vscode/settings.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index c652a8e3..9efb6a04 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,8 +4,5 @@ "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"], "[svelte]": { "editor.defaultFormatter": "svelte.svelte-vscode" - }, - "[svg]": { - "editor.defaultFormatter": "jock.svg" } } From 05e7213a32d0cfd72a72517871c4e6e1617d82d6 Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Tue, 17 Jan 2023 18:33:17 -0500 Subject: [PATCH 03/20] Consistent final newlines --- content/1-reactivity/2-update-state/marko/Name.marko | 2 +- content/2-templating/2-styling/marko/CssStyle.marko | 2 +- content/4-component-composition/1-props/marko/App.marko | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/1-reactivity/2-update-state/marko/Name.marko b/content/1-reactivity/2-update-state/marko/Name.marko index 8cc3af05..d1f6f5af 100644 --- a/content/1-reactivity/2-update-state/marko/Name.marko +++ b/content/1-reactivity/2-update-state/marko/Name.marko @@ -1,3 +1,3 @@ -

Hello ${name}

\ No newline at end of file +

Hello ${name}

diff --git a/content/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko index 12f4f521..708991c3 100644 --- a/content/2-templating/2-styling/marko/CssStyle.marko +++ b/content/2-templating/2-styling/marko/CssStyle.marko @@ -5,4 +5,4 @@ .title { color: red; } - \ No newline at end of file + diff --git a/content/4-component-composition/1-props/marko/App.marko b/content/4-component-composition/1-props/marko/App.marko index f164ff2d..7322ec50 100644 --- a/content/4-component-composition/1-props/marko/App.marko +++ b/content/4-component-composition/1-props/marko/App.marko @@ -3,4 +3,4 @@ age=20 favouriteColors=["green", "blue", "red"] isAvailable -/> \ No newline at end of file +/> From a245195fe7dee6ac36ecdf3d65bd053c08e62c43 Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Wed, 18 Jan 2023 12:02:54 -0500 Subject: [PATCH 04/20] Apply suggestions from code review Everything except for the TS declarations since I think Dylan ought to weigh in Co-authored-by: Michael Rawlings Co-authored-by: Luke LaValva --- .../2-templating/6-conditional/marko/TrafficLight.marko | 7 ++----- content/3-lifecycle/2-on-unmount/marko/Time.marko | 6 +++--- content/6-form-input/2-checkbox/marko/IsAvailable.marko | 2 +- content/6-form-input/3-radio/marko/PickPill.marko | 7 +++---- 4 files changed, 9 insertions(+), 13 deletions(-) diff --git a/content/2-templating/6-conditional/marko/TrafficLight.marko b/content/2-templating/6-conditional/marko/TrafficLight.marko index 570ae11b..0a1c3c4e 100644 --- a/content/2-templating/6-conditional/marko/TrafficLight.marko +++ b/content/2-templating/6-conditional/marko/TrafficLight.marko @@ -1,12 +1,9 @@ static const TRAFFIC_LIGHTS = ["red", "orange", "green"]; - +

Light is: ${light}

diff --git a/content/3-lifecycle/2-on-unmount/marko/Time.marko b/content/3-lifecycle/2-on-unmount/marko/Time.marko index c8471dea..a17f1d23 100644 --- a/content/3-lifecycle/2-on-unmount/marko/Time.marko +++ b/content/3-lifecycle/2-on-unmount/marko/Time.marko @@ -1,6 +1,6 @@ - time = new Date()), 1000) } + time = new Date(), 1000) } onDestroy () { clearInterval(this.timer) } -}/> +/>

Current time: ${time.toLocaleTimeString()}

diff --git a/content/6-form-input/2-checkbox/marko/IsAvailable.marko b/content/6-form-input/2-checkbox/marko/IsAvailable.marko index 5257ec92..8d2d272c 100644 --- a/content/6-form-input/2-checkbox/marko/IsAvailable.marko +++ b/content/6-form-input/2-checkbox/marko/IsAvailable.marko @@ -1,5 +1,5 @@ diff --git a/content/6-form-input/3-radio/marko/PickPill.marko b/content/6-form-input/3-radio/marko/PickPill.marko index b9e66f47..bebf8b88 100644 --- a/content/6-form-input/3-radio/marko/PickPill.marko +++ b/content/6-form-input/3-radio/marko/PickPill.marko @@ -1,8 +1,7 @@ -function handleChange (event) { - picked = event.target.value; -} - +
Picked: ${picked}
Date: Wed, 18 Jan 2023 12:37:13 -0500 Subject: [PATCH 05/20] Feedback: no space before method parens, no TS, else-if, ColorSelect works now --- README.md | 24 +++++++++---------- .../6-conditional/marko/TrafficLight.marko | 10 ++++---- .../3-lifecycle/2-on-unmount/marko/Time.marko | 4 ++-- .../1-props/marko/UserProfile.marko | 7 ------ .../2-emit-to-parent/marko/AnswerButton.marko | 5 ---- .../2-emit-to-parent/marko/App.marko | 4 ++-- .../5-context/marko/UserProfile.marko | 2 +- .../4-select/marko/ColorSelect.marko | 8 +++---- 8 files changed, 26 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 6d4695b4..096756a5 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ How do we solve this ? Developers love having framework overview by examples. It Svelte - +100% progress - [x] Reactivity - [x] Declare state @@ -52,7 +52,7 @@ How do we solve this ? Developers love having framework overview by examples. It React - + 100% progress - [x] Reactivity - [x] Declare state @@ -89,7 +89,7 @@ How do we solve this ? Developers love having framework overview by examples. It Vue 3 - + 96% progress - [x] Reactivity - [x] Declare state @@ -126,7 +126,7 @@ How do we solve this ? Developers love having framework overview by examples. It SolidJS - + 92% progress - [x] Reactivity - [x] Declare state @@ -163,7 +163,7 @@ How do we solve this ? Developers love having framework overview by examples. It Qwik - + 92% progress - [x] Reactivity - [x] Declare state @@ -200,7 +200,7 @@ How do we solve this ? Developers love having framework overview by examples. It Angular - + 92% progress - [x] Reactivity - [x] Declare state @@ -237,7 +237,7 @@ How do we solve this ? Developers love having framework overview by examples. It Lit - + 96% progress - [x] Reactivity - [x] Declare state @@ -274,7 +274,7 @@ How do we solve this ? Developers love having framework overview by examples. It Vue 2 - + 96% progress - [x] Reactivity - [x] Declare state @@ -311,7 +311,7 @@ How do we solve this ? Developers love having framework overview by examples. It Ember - + 92% progress - [x] Reactivity - [x] Declare state @@ -348,7 +348,7 @@ How do we solve this ? Developers love having framework overview by examples. It Alpine - + 96% progress - [x] Reactivity - [x] Declare state @@ -385,7 +385,7 @@ How do we solve this ? Developers love having framework overview by examples. It Aurelia 1 - + 92% progress - [x] Reactivity - [x] Declare state @@ -422,7 +422,7 @@ How do we solve this ? Developers love having framework overview by examples. It Marko - 92% progress + 93% progress - [x] Reactivity - [x] Declare state diff --git a/content/2-templating/6-conditional/marko/TrafficLight.marko b/content/2-templating/6-conditional/marko/TrafficLight.marko index 0a1c3c4e..cbde9770 100644 --- a/content/2-templating/6-conditional/marko/TrafficLight.marko +++ b/content/2-templating/6-conditional/marko/TrafficLight.marko @@ -2,13 +2,13 @@ static const TRAFFIC_LIGHTS = ["red", "orange", "green"]; - +

Light is: ${light}

You must STOP - SLOW DOWN - GO + SLOW DOWN + GO

diff --git a/content/3-lifecycle/2-on-unmount/marko/Time.marko b/content/3-lifecycle/2-on-unmount/marko/Time.marko index a17f1d23..5fd8e9bd 100644 --- a/content/3-lifecycle/2-on-unmount/marko/Time.marko +++ b/content/3-lifecycle/2-on-unmount/marko/Time.marko @@ -1,6 +1,6 @@ time = new Date(), 1000) } - onDestroy () { clearInterval(this.timer) } + onMount() { this.timer = setInterval(_ => time = new Date(), 1000) } + onDestroy() { clearInterval(this.timer) } />

Current time: ${time.toLocaleTimeString()}

diff --git a/content/4-component-composition/1-props/marko/UserProfile.marko b/content/4-component-composition/1-props/marko/UserProfile.marko index adc8302c..65e14b1a 100644 --- a/content/4-component-composition/1-props/marko/UserProfile.marko +++ b/content/4-component-composition/1-props/marko/UserProfile.marko @@ -1,10 +1,3 @@ -export interface Input { - name: string; - age: number | void; - favouriteColors: string[]; - isAvailable: boolean; -} - YES diff --git a/content/4-component-composition/2-emit-to-parent/marko/App.marko b/content/4-component-composition/2-emit-to-parent/marko/App.marko index 43b3ce16..d771bd5b 100644 --- a/content/4-component-composition/2-emit-to-parent/marko/App.marko +++ b/content/4-component-composition/2-emit-to-parent/marko/App.marko @@ -1,7 +1,7 @@

Are you happy?

${isHappy ? "😀" : "😥"}

diff --git a/content/4-component-composition/5-context/marko/UserProfile.marko b/content/4-component-composition/5-context/marko/UserProfile.marko index 5729377e..19d28dcd 100644 --- a/content/4-component-composition/5-context/marko/UserProfile.marko +++ b/content/4-component-composition/5-context/marko/UserProfile.marko @@ -3,7 +3,7 @@

My Profile

Username: ${username}

Email: ${email}

- diff --git a/content/6-form-input/4-select/marko/ColorSelect.marko b/content/6-form-input/4-select/marko/ColorSelect.marko index fae2dc06..6f8defc6 100644 --- a/content/6-form-input/4-select/marko/ColorSelect.marko +++ b/content/6-form-input/4-select/marko/ColorSelect.marko @@ -1,14 +1,14 @@ - +]; - - From ddfca26a5eae3b1425c80fa8c23b5bfead75c00f Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Thu, 19 Jan 2023 12:56:40 -0500 Subject: [PATCH 06/20] Pre-bugbash updates --- CONTRIBUTING.md | 7 +++- README.md | 5 +++ build/lib/generateContent.js | 11 ++++++- build/lib/playground/createMarkoPlayground.js | 18 ++++++++++ build/lib/playground/index.js | 2 ++ .../2-styling/marko/CssStyle.marko | 2 +- .../6-conditional/marko/TrafficLight.marko | 4 +-- .../3-slot/marko/FunnyButton.marko | 28 +++++++++------- .../4-slot-fallback/marko/FunnyButton.marko | 28 +++++++++------- .../5-context/marko/App.marko | 7 ++-- .../1-render-app/marko/index.marko | 2 +- .../3-router-link/marko/cli.md | 8 +++++ .../3-router-link/marko/run.md | 8 +++++ .../7-webapp-features/4-routing/marko/cli.md | 9 +++++ .../7-webapp-features/4-routing/marko/run.md | 19 +++++++++++ frameworks.mjs | 33 ++++++++----------- 16 files changed, 137 insertions(+), 54 deletions(-) create mode 100644 build/lib/playground/createMarkoPlayground.js create mode 100644 content/7-webapp-features/3-router-link/marko/cli.md create mode 100644 content/7-webapp-features/3-router-link/marko/run.md create mode 100644 content/7-webapp-features/4-routing/marko/cli.md create mode 100644 content/7-webapp-features/4-routing/marko/run.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7ed5c263..a610be21 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ # 🧑‍💻 Contributing -This site is built with [Astro](https://docs.astro.build). Site content is written in Markdown format located in `content`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request. +This site is built with [Vite](https://vitejs.dev) and [Svelte](https://svelte.dev). Site content is written in Markdown format located in `content`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request. ## Add a framework @@ -8,6 +8,11 @@ This site is built with [Astro](https://docs.astro.build). Site content is writt 2. Add the new framework SVG logo in `public/framework` 3. Install the ESLint plugin associated to the framework 4. In `frameworks.mjs`, add a new entry with SVG link and ESLint configuration +5. If the framework needs a language syntax highlight, add it to the call to `getHighlighter`’s `langs` argument in `build/lib/generateContent.js` +6. To make a playground link: + 1. Add a `create${FRAMEWORK}Playground.js` file in `build/lib/playground`. + 2. That file should export a function that returns an object with a `fromContentByFilename` method that accepts an object of filepath keys and file content values, then returns an absolute URL to a framework’s online REPL with those files loaded. + 3. Register its export in `build/lib/playground/index.js` ## Improve website diff --git a/README.md b/README.md index 096756a5..54c99e34 100644 --- a/README.md +++ b/README.md @@ -476,6 +476,11 @@ This project requires Node.js to be `v16.0.0` or higher. 2. Add the new framework SVG logo in `public/framework` 3. Install the ESLint plugin associated to the framework 4. In `frameworks.mjs`, add a new entry with SVG link and ESLint configuration +5. If the framework needs a language syntax highlight, add it to the call to `getHighlighter`’s `langs` argument in `build/lib/generateContent.js` +6. To make a playground link: + 1. Add a `create${FRAMEWORK}Playground.js` file in `build/lib/playground`. + 2. That file should export a function that returns an object with a `fromContentByFilename` method that accepts an object of filepath keys and file content values, then returns an absolute URL to a framework’s online REPL with those files loaded. + 3. Register its export in `build/lib/playground/index.js` ## 🧑‍💻 Contributors diff --git a/build/lib/generateContent.js b/build/lib/generateContent.js index 6b4ea322..bf8bce2a 100644 --- a/build/lib/generateContent.js +++ b/build/lib/generateContent.js @@ -25,7 +25,16 @@ async function pathExists(path) { export default async function generateContent() { const highlighter = await getHighlighter({ theme: componentPartyShikiTheme, - langs: ["javascript", "svelte", "html", "hbs", "tsx", "jsx", "vue"], + langs: [ + "javascript", + "svelte", + "html", + "hbs", + "tsx", + "jsx", + "vue", + "marko", + ], }); const rootDir = await packageDirectory(); diff --git a/build/lib/playground/createMarkoPlayground.js b/build/lib/playground/createMarkoPlayground.js new file mode 100644 index 00000000..154ac1a9 --- /dev/null +++ b/build/lib/playground/createMarkoPlayground.js @@ -0,0 +1,18 @@ +import nodePath from "node:path"; +import { compressToURL } from "@matschik/lz-string"; + +const BASE = "https://markojs.com/playground/#"; + +export default function createMarkoPlayground() { + return { + fromContentByFilename(contentByFilename) { + const data = Object.entries(contentByFilename).map(([path, content]) => ({ + name: nodePath.parse(path).base, + path: `/components/${path}`, + content, + })); + + return BASE + compressToURL(JSON.stringify(data)); + }, + }; +} diff --git a/build/lib/playground/index.js b/build/lib/playground/index.js index 900e8dc6..1e05a653 100644 --- a/build/lib/playground/index.js +++ b/build/lib/playground/index.js @@ -2,10 +2,12 @@ import createAlpinePlayground from "./createAlpinePlayground.js"; import createSveltePlayground from "./createSveltePlayground.js"; import createVue3Playground from "./createVue3Playground.js"; import createSolidPlayground from "./createSolidPlayground.js"; +import createMarkoPlayground from "./createMarkoPlayground.js"; export default { vue3: createVue3Playground(), svelte: createSveltePlayground(), alpine: createAlpinePlayground(), solid: createSolidPlayground(), + marko: createMarkoPlayground(), }; diff --git a/content/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko index 708991c3..529b9dbd 100644 --- a/content/2-templating/2-styling/marko/CssStyle.marko +++ b/content/2-templating/2-styling/marko/CssStyle.marko @@ -1,7 +1,7 @@ I am red - diff --git a/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko index f558610b..e889afde 100644 --- a/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko +++ b/content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko @@ -1,16 +1,20 @@ - + + + .funnyButton { + background: rgba(0, 0, 0, 0.4); + color: #fff; + padding: 10px 20px; + font-size: 30px; + border: 2px solid #fff; + margin: 8px; + transform: scale(0.9); + box-shadow: 4px 4px rgba(0, 0, 0, 0.4); + transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s; + outline: 0; + } + diff --git a/content/4-component-composition/5-context/marko/App.marko b/content/4-component-composition/5-context/marko/App.marko index 3694c90a..c1cbe20f 100644 --- a/content/4-component-composition/5-context/marko/App.marko +++ b/content/4-component-composition/5-context/marko/App.marko @@ -3,12 +3,11 @@ username: "unicorn42", email: "unicorn42@example.com", }/> - -function updateUsername(newUsername) { +

Welcome back, ${user.username}

- + diff --git a/content/7-webapp-features/1-render-app/marko/index.marko b/content/7-webapp-features/1-render-app/marko/index.marko index 75bc3eaf..f3be8a0d 100644 --- a/content/7-webapp-features/1-render-app/marko/index.marko +++ b/content/7-webapp-features/1-render-app/marko/index.marko @@ -1,4 +1,4 @@ - + diff --git a/content/7-webapp-features/3-router-link/marko/cli.md b/content/7-webapp-features/3-router-link/marko/cli.md new file mode 100644 index 00000000..6c41bf44 --- /dev/null +++ b/content/7-webapp-features/3-router-link/marko/cli.md @@ -0,0 +1,8 @@ +With [`@marko/cli`’s `build` or `serve`](https://github.com/marko-js/cli/tree/main/packages/serve) + +```marko + +``` diff --git a/content/7-webapp-features/3-router-link/marko/run.md b/content/7-webapp-features/3-router-link/marko/run.md new file mode 100644 index 00000000..ecd82bc4 --- /dev/null +++ b/content/7-webapp-features/3-router-link/marko/run.md @@ -0,0 +1,8 @@ +With [`@marko/run`](https://github.com/marko-js/run/tree/main/packages/serve) + +```marko + +``` diff --git a/content/7-webapp-features/4-routing/marko/cli.md b/content/7-webapp-features/4-routing/marko/cli.md new file mode 100644 index 00000000..efbb11db --- /dev/null +++ b/content/7-webapp-features/4-routing/marko/cli.md @@ -0,0 +1,9 @@ +With [`@marko/cli`’s `build` or `serve`](https://github.com/marko-js/cli/tree/main/packages/serve) + +``` +index.marko // index page "/" +about.marko // about page "/about" +hello/ +|-- [name].marko // dynamic Hello page "/hello/Emily" +[rest].marko // dynamic parameter can be used as catch-all to show 404 page +``` diff --git a/content/7-webapp-features/4-routing/marko/run.md b/content/7-webapp-features/4-routing/marko/run.md new file mode 100644 index 00000000..418b0cbd --- /dev/null +++ b/content/7-webapp-features/4-routing/marko/run.md @@ -0,0 +1,19 @@ +With [`@marko/run`](https://github.com/marko-js/run/tree/main/packages/serve) + +``` +routes/ +|-- +page.marko // index page "/" +|-- about/ + |-- +page.marko // about page "/about" +|-- +layout.marko // global app layout +|-- +handler.{js,ts,*} // run code for conditionally rendering HTML/API route +|-- +middleware.{js,ts,*} // added to HTTP framework middleware chain +|-- +meta.{js,ts,*} // adds metadata to route +|-- +404.marko // shows when no suitable route found +|-- +500.marko // shows when any route throws +|-- /path/_less/ + |-- +page.marko // pathless directory, page "/path" +|-- /$dynamic/ + |-- +page.marko // dynamic parameter, can be used as a route-specific 404 +|-- /$$catchall/ // like dynamic, but consumes all path segments until the end +``` diff --git a/frameworks.mjs b/frameworks.mjs index 272e0bda..9b5ffdcc 100644 --- a/frameworks.mjs +++ b/frameworks.mjs @@ -110,6 +110,19 @@ export default [ return sortAllFilenames(files, ["index.html", "App.tsx"]); }, }, + { + id: "marko", + title: "Marko", + img: "framework/marko.svg", + eslint: { + files: ["!**"], // Marko’s linter/prettyprinter doesn’t use eslint + }, + playgroundURL: "https://markojs.com/playground/", + documentationURL: "https://markojs.com/docs/getting-started/", + filesSorter(files) { + return sortAllFilenames(files, ["index.marko", "App.marko"]); + }, + }, { id: "angular", title: "Angular", @@ -251,24 +264,4 @@ export default [ return sortAllFilenames(files, ["app.html", "app.ts"]); }, }, - { - id: "marko", - title: "Marko", - img: "framework/marko.svg", - eslint: { - env: { - browser: true, - es2021: true, - node: true, - }, - parser: "@typescript-eslint/parser", - files: ["**/marko/**"], - extends: ["eslint:recommended"], - }, - playgroundURL: "https://markojs.com/playground/", - documentationURL: "https://markojs.com/docs/getting-started/", - filesSorter(files) { - return sortAllFilenames(files, ["app.marko"]); - }, - }, ]; From c5f4c487e19e0a480d89b6d55be4c5da0f4fdc80 Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Thu, 19 Jan 2023 12:58:49 -0500 Subject: [PATCH 07/20] This is probably why they want us to provide a linter --- content/1-reactivity/2-update-state/marko/Name.marko | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/1-reactivity/2-update-state/marko/Name.marko b/content/1-reactivity/2-update-state/marko/Name.marko index d1f6f5af..d2cfcb4b 100644 --- a/content/1-reactivity/2-update-state/marko/Name.marko +++ b/content/1-reactivity/2-update-state/marko/Name.marko @@ -1,3 +1,3 @@ - +

Hello ${name}

From bca04b93317f2c563d0b74a198d27b050c2fb939 Mon Sep 17 00:00:00 2001 From: Glenn Becker Date: Mon, 23 Jan 2023 14:10:20 -0700 Subject: [PATCH 08/20] Update Qwik logo (#147) --- public/framework/qwik.svg | 1787 +------------------------------------ 1 file changed, 4 insertions(+), 1783 deletions(-) diff --git a/public/framework/qwik.svg b/public/framework/qwik.svg index b9337f62..96b61bf5 100644 --- a/public/framework/qwik.svg +++ b/public/framework/qwik.svg @@ -1,1784 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + \ No newline at end of file From 1c75beee8eda7784418f57018138e1ee9f4c4954 Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Mon, 30 Jan 2023 13:58:31 -0500 Subject: [PATCH 09/20] Finishing touches --- content/2-templating/2-styling/marko/CssStyle.marko | 8 +++++++- content/2-templating/5-dom-ref/marko/InputFocused.marko | 2 -- .../2-templating/5-dom-ref/marko/InputIndeterminate.marko | 2 ++ content/3-lifecycle/1-on-mount/marko/PageTitle.marko | 3 --- content/3-lifecycle/1-on-mount/marko/ViewportSize.marko | 3 +++ 5 files changed, 12 insertions(+), 6 deletions(-) delete mode 100644 content/2-templating/5-dom-ref/marko/InputFocused.marko create mode 100644 content/2-templating/5-dom-ref/marko/InputIndeterminate.marko delete mode 100644 content/3-lifecycle/1-on-mount/marko/PageTitle.marko create mode 100644 content/3-lifecycle/1-on-mount/marko/ViewportSize.marko diff --git a/content/2-templating/2-styling/marko/CssStyle.marko b/content/2-templating/2-styling/marko/CssStyle.marko index 529b9dbd..e186e7c3 100644 --- a/content/2-templating/2-styling/marko/CssStyle.marko +++ b/content/2-templating/2-styling/marko/CssStyle.marko @@ -1,8 +1,14 @@ I am red + -

Page title is: ${pageTitle}

diff --git a/content/3-lifecycle/1-on-mount/marko/ViewportSize.marko b/content/3-lifecycle/1-on-mount/marko/ViewportSize.marko new file mode 100644 index 00000000..7ffcf870 --- /dev/null +++ b/content/3-lifecycle/1-on-mount/marko/ViewportSize.marko @@ -0,0 +1,3 @@ + + +

Viewport size: ${viewportSize}

From d9c123b63975e10eecaad66e151173bbdb6d5cc7 Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Mon, 30 Jan 2023 14:16:45 -0500 Subject: [PATCH 10/20] Argle --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 54c99e34..f9c9b589 100644 --- a/README.md +++ b/README.md @@ -422,7 +422,7 @@ How do we solve this ? Developers love having framework overview by examples. It Marko - 93% progress + 100% progress - [x] Reactivity - [x] Declare state @@ -452,8 +452,8 @@ How do we solve this ? Developers love having framework overview by examples. It - [x] Webapp features - [x] Render app - [x] Fetch data - - [ ] Router link - - [ ] Routing + - [x] Router link + - [x] Routing From 704f3105d8dacd6fd5822c2f84c136d09c46bfad Mon Sep 17 00:00:00 2001 From: Taylor Hunt Date: Mon, 30 Jan 2023 15:46:13 -0500 Subject: [PATCH 11/20] @rturnq feedback --- content/7-webapp-features/4-routing/marko/run.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/7-webapp-features/4-routing/marko/run.md b/content/7-webapp-features/4-routing/marko/run.md index 418b0cbd..9ba3a53e 100644 --- a/content/7-webapp-features/4-routing/marko/run.md +++ b/content/7-webapp-features/4-routing/marko/run.md @@ -6,7 +6,7 @@ routes/ |-- about/ |-- +page.marko // about page "/about" |-- +layout.marko // global app layout -|-- +handler.{js,ts,*} // run code for conditionally rendering HTML/API route +|-- +handler.{js,ts,*} // conditionally render HTML, API route, run arbitrary code… |-- +middleware.{js,ts,*} // added to HTTP framework middleware chain |-- +meta.{js,ts,*} // adds metadata to route |-- +404.marko // shows when no suitable route found From c93483b4e0636f17e69919e47df152783e8a1aa2 Mon Sep 17 00:00:00 2001 From: dang khoi Date: Thu, 9 Feb 2023 07:09:24 +0700 Subject: [PATCH 12/20] Update App.svelte (#141) Fix horizontal scroll in small screen --- src/App.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.svelte b/src/App.svelte index e21936cc..4a5f81d5 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -130,7 +130,7 @@