-
Notifications
You must be signed in to change notification settings - Fork 240
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* WIP: add Marko * WTF, vscode * Consistent final newlines * Apply suggestions from code review Everything except for the TS declarations since I think Dylan ought to weigh in Co-authored-by: Michael Rawlings <[email protected]> Co-authored-by: Luke LaValva <[email protected]> * Feedback: no space before method parens, no TS, else-if, ColorSelect works now * Pre-bugbash updates * This is probably why they want us to provide a linter * Finishing touches * Argle * @rturnq feedback * Match examples to other frameworks --------- Co-authored-by: Michael Rawlings <[email protected]> Co-authored-by: Luke LaValva <[email protected]> Co-authored-by: tigt <[email protected]>
- Loading branch information
1 parent
11975c8
commit a01e903
Showing
39 changed files
with
399 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)); | ||
}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
<let/name = "John"/> | ||
<h1>Hello ${name}</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<let/name = "John"/> | ||
<effect() { name = "Jane" }/> | ||
<h1>Hello ${name}</h1> |
3 changes: 3 additions & 0 deletions
3
content/1-reactivity/3-computed-state/marko/DoubleCount.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<let/count = 10/> | ||
<const/doubleCount = count * 2/> | ||
<div>${doubleCount}</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<h1>Hello world</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<h1.title>I am red</h1> | ||
<button style={ fontSize: "10rem" }>I am a button</button> | ||
<button class=scopedButton>I am a style-scoped button</button> | ||
|
||
<style> | ||
.title { | ||
color: red; | ||
} | ||
</style> | ||
<style/{ scopedButton }> | ||
.scopedButton { | ||
font-size: 10rem; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<ul> | ||
<for|color| of=["red", "green", "blue"]> | ||
<li>${color}</li> | ||
</for> | ||
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<let/count = 0/> | ||
<p>Counter: ${count}</p> | ||
<button onClick() { count++ }>+1</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
<input/inputElement> | ||
<effect() { inputElement().focus() }/> |
14 changes: 14 additions & 0 deletions
14
content/2-templating/6-conditional/marko/TrafficLight.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
static const TRAFFIC_LIGHTS = ["red", "orange", "green"]; | ||
<let/lightIndex = 0/> | ||
<const/light = TRAFFIC_LIGHTS[lightIndex]/> | ||
|
||
<button onClick() { lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length }> | ||
Next light | ||
</button> | ||
<p>Light is: ${light}</p> | ||
<p> | ||
You must | ||
<if=light === "red">STOP</if> | ||
<else-if=light === "orange">SLOW DOWN</else-if> | ||
<else>GO</else> | ||
</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<let/pageTitle = ""/> | ||
<effect() { pageTitle = document.title }/> | ||
<p>Page title: ${pageTitle}</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<let/time = new Date()/> | ||
<lifecycle | ||
onMount() { this.timer = setInterval(_ => time = new Date(), 1000) } | ||
onDestroy() { clearInterval(this.timer) } | ||
/> | ||
<p>Current time: ${time.toLocaleTimeString()}</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<UserProfile | ||
name="John" | ||
age=20 | ||
favouriteColors=["green", "blue", "red"] | ||
isAvailable | ||
/> |
11 changes: 11 additions & 0 deletions
11
content/4-component-composition/1-props/marko/UserProfile.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<const/{ | ||
name = "", | ||
age = null, | ||
favouriteColors = [], | ||
isAvailable = false, | ||
} = input/> | ||
|
||
<p>My name is ${name}!</p> | ||
<p>My age is ${age}!</p> | ||
<p>My favourite colors are ${favouriteColors.join(", ")}!</p> | ||
<p>I am ${isAvailable ? "available" : "not available"}</p> |
2 changes: 2 additions & 0 deletions
2
content/4-component-composition/2-emit-to-parent/marko/AnswerButton.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
<button onClick=input.onYes>YES</button> | ||
<button onClick=input.onNo>NO</button> |
7 changes: 7 additions & 0 deletions
7
content/4-component-composition/2-emit-to-parent/marko/App.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<let/isHappy = true/> | ||
<p>Are you happy?</p> | ||
<AnswerButton | ||
onYes() { isHappy = true } | ||
onNo() { isHappy = false } | ||
/> | ||
<p style={ fontSize: 50 }>${isHappy ? "😀" : "😥"}</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<FunnyButton>Click me!</FunnyButton> |
18 changes: 18 additions & 0 deletions
18
content/4-component-composition/3-slot/marko/FunnyButton.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<button.${funnyButton}> | ||
<${input.renderBody}/> | ||
</button> | ||
|
||
<style.module.css/{ funnyButton }> | ||
.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; | ||
} | ||
</style> |
2 changes: 2 additions & 0 deletions
2
content/4-component-composition/4-slot-fallback/marko/App.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
<FunnyButton/> | ||
<FunnyButton>I got content!</FunnyButton> |
20 changes: 20 additions & 0 deletions
20
content/4-component-composition/4-slot-fallback/marko/FunnyButton.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<button.${funnyButton}> | ||
<${input.renderBody}> | ||
<span>No content found</span> | ||
</> | ||
</button> | ||
|
||
<style.module.css/{ funnyButton }> | ||
.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; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<let/user = { // In a real app, you would fetch the user data from an API | ||
id: 1, | ||
username: "unicorn42", | ||
email: "[email protected]", | ||
}/> | ||
<const/updateUsername(newUsername) { | ||
user = { ...user, username: newUsername }; | ||
}/> | ||
|
||
<h1>Welcome back, ${user.username}</h1> | ||
<set={ ...user, updateUsername }> | ||
<UserProfile /> | ||
</set> |
9 changes: 9 additions & 0 deletions
9
content/4-component-composition/5-context/marko/UserProfile.marko
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<get/{ username, email, updateUsername } = "App"/> | ||
<div> | ||
<h2>My Profile</h2> | ||
<p>Username: ${username}</p> | ||
<p>Email: ${email}</p> | ||
<button onClick() { updateUsername("Jane") }> | ||
Update username to Jane | ||
</button> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<let/text = "Hello world"/> | ||
<p>${text}</p> | ||
<input value:=text/> |
Oops, something went wrong.