git.iko.soy/rowtype-yoga/purescript-yoga-react-dom
on main help sign in
Allow "as" in link
commit9552724471a27ab181b8a590e2ef9470e64350a7 authorMark Eibes <mark.eibes@gmail.com> dateTue 16 Jan 2024, 21:19 (3 years ago) parenta63928d
6 files changed+55−17
compare with main
unifiedsplit
.idea/vcs.xml+6 index.html+1−1 src/Beta/DOM/HTML.purs+1 src/Beta/DOM/HTML/Link.purs+3−1 src/Beta/DOM/HTML/Menu.purs+26 test/Example.purs+18−15
.idea/vcs.xmlnew file+6
@@ -0,0 +1,6 @@
1+<?xml version="1.0" encoding="UTF-8"?>
2+<project version="4">
3+ <component name="VcsDirectoryMappings">
4+ <mapping directory="$PROJECT_DIR$" vcs="Git" />
5+ </component>
6+</project>
index.html+1−1
@@ -1 +1 @@
1−<html><head><title>My Web Page</title><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="styles.css"/><style>body { background-color: #f0f0f2; }</style><script src="https://cdn.tailwindcss.com"></script><body class="w-full"><div id="react-root"><div><nav><ul class="navList"><li class="navItem"><a href="/">Home</a></li><li class="navItem"><a href="/about">About</a></li><li class="navItem"><a href="/contact">Contact</a></li></ul></nav><aside><h4 class="title">My Blog</h4><p class="text">This is my blog. I hope you like it!</p></aside><main class="w-[80ch] max-w-[80ch] bg-white mx-auto shadow"><article class="px-8"><nav class="navigation"><ul class="flex flex-row justify-between"><li class="navItem">Home</li><li class="navItem">About</li><li class="navItem">Contact</li></ul></nav><div class="content"><h1 class="text-4xl">My Web Page</h1><p class="text">This is <b>my </b><i>web page</i>. Isn&#x27;t it grand?</p><blockquote class="italic">I am hungry.</blockquote><cite class="text"> -- Alfred Einstein</cite><div class="container"><video src="movie.mp4" width="320" height="240"><track kind="subtitles" src="subtitles_en.vtt" srcLang="en"/></video></div><table class="table"><thead class="thead"><tr class="headerRow"><th class="headerCell">Header 1</th><th class="headerCell">Header 2</th></tr></thead><tbody class="tbody"><tr class="tableRow"><td class="tableData">Row 1, Col 1</td><td class="tableData">Row 1, Col 2</td></tr><tr class="tableRow"><td class="tableData">Row 2, Col 1</td><td class="tableData">Row 2, Col 2</td></tr></tbody><tfoot class="tfoot"><tr class="footerRow"><td class="footerCell">Footer 1</td><td class="footerCell">Footer 2</td></tr></tfoot></table><p class="text">The temperature of boiling water is 100</p><sub class="text">o</sub><sup class="text">C</sup><button>Click me!</button></div><address class="footer">1234 Main St, Anytown, USA</address></article></main><button class="bg-black px-4 py-2 rounded shadow font-bold text-white">Count up!</button><p>You clicked me <b>0</b> times.</p><footer class="footer">1234 Main St, Anytown, USA</footer></div></div></body><script src="index.js"></script></head></html>
1+<html><head><title>My Web Page</title><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="styles.css"/><style>body { background-color: #f0f0f2; }</style><script src="https://cdn.tailwindcss.com"></script><body class="w-full"><div id="react-root"><div><nav><ul class="navList"><li class="navItem"><a href="/">Home</a></li><li class="navItem">About</li><li class="navItem">Contact</li></ul></nav><aside><h4 class="title">My Blog</h4><p class="text">This is my blog. I hope you like it!</p></aside><main class="w-[80ch] max-w-[80ch] bg-white mx-auto shadow"><article class="px-8"><nav class="navigation"><ul class="flex flex-row justify-between"><li class="navItem">Home</li><li class="navItem">About</li><li class="navItem">Contact</li></ul></nav><div class="content"><h1 class="text-4xl">My Web Page</h1><p class="text">This is <b>my </b><i>web page</i>. Isn&#x27;t it grand?</p><blockquote class="italic">I am hungry.</blockquote><cite class="text"> -- Alfred Einstein</cite><div class="container"><video src="movie.mp4" width="320" height="240"><track kind="subtitles" src="subtitles_en.vtt" srcLang="en"/></video></div><table class="table"><thead class="thead"><tr class="headerRow"><th class="headerCell">Header 1</th><th class="headerCell">Header 2</th></tr></thead><tbody class="tbody"><tr class="tableRow"><td class="tableData">Row 1, Col 1</td><td class="tableData">Row 1, Col 2</td></tr><tr class="tableRow"><td class="tableData">Row 2, Col 1</td><td class="tableData">Row 2, Col 2</td></tr></tbody><tfoot class="tfoot"><tr class="footerRow"><td class="footerCell">Footer 1</td><td class="footerCell">Footer 2</td></tr></tfoot></table><h3>&lt;p&gt;, &lt;sup&gt;, &lt;sub&gt;</h3><p class="text">The temperature of boiling water is 100</p><sup class="text">o</sup>C<sub class="text">1</sub></div><h3>&lt;address&gt;</h3><address class="footer">1234 Main St, Anytown, USA</address></article><div class="myForm"><form action="#"><input type="text" placeholder="Type something" class="inputField"/><input type="submit" class="submitBtn" value="Submit"/></form><meta name="6"/></div></main><button class="bg-black px-4 py-2 rounded shadow font-bold text-white">Count up!</button><p>You clicked me <b>0</b> times.</p><footer class="footer">1234 Main St, Anytown, USA</footer></div></div></body><script src="index.js"></script></head></html>
src/Beta/DOM/HTML.purs+1
@@ -161,6 +161,7 @@ import Beta.DOM.HTML.Map
161161import Beta.DOM.HTML.Mark
162162import Beta.DOM.HTML.Meta
163163import Beta.DOM.HTML.Meter
164+import Beta.DOM.HTML.Menu
164165import Beta.DOM.HTML.Nav
165166import Beta.DOM.HTML.NoScript
166167import Beta.DOM.HTML.Object
src/Beta/DOM/HTML/Link.purs+3−1
@@ -20,6 +20,7 @@ import Beta.DOM.Internal (FFIComponent_, createBuiltinElement_)
2020-- || `rel` | `String` | `"stylesheet"` | The relationship between the current document and the linked resource. |
2121-- || `type` | `String` | `"image/png"` | The media type of the linked resource. |
2222-- || `media` | `String` | `"screen"` | What media/device the linked resource is optimised for. |
23+-- || `as` | `String` | `"fetch"` | This attribute is required when rel="preload" has been set on the <link> element, optional when rel="modulepreload" has been set, and otherwise should not be used. |
2324link :: FFIComponent_ LinkAttributes
2425link = createBuiltinElement_ "link"
2526
@@ -28,4 +29,5 @@ type LinkAttributes = BaseAttributesR
2829 , rel :: String
2930 , type :: String
3031 , media :: String
31− )
32+ , "as" :: String
33+ )
src/Beta/DOM/HTML/Menu.pursnew file+26
@@ -0,0 +1,26 @@
1+module Beta.DOM.HTML.Menu (menu) where
2+
3+import Prelude
4+
5+import Beta.DOM.Attributes (BaseAttributesR)
6+import Beta.DOM.Internal (FFIComponent_, createBuiltinElement_)
7+import React.Basic.Events (EventHandler)
8+
9+-- | The `<menu>` tag in HTML, represents a group of commands that a user can perform or activate.
10+-- | #### Example:
11+-- | ```purescript
12+-- | menu { type: "context", label: "My Menu" }
13+-- | ```
14+-- |
15+-- | Common attributes:
16+-- || Attribute | Type | Example | Description |
17+-- ||-----------|----------|----------------|-------------|
18+-- || `type` | `String` | `"context"` | Type of menu. |
19+-- || `label` | `String` | `"My Menu"` | Label for the menu. |
20+menu :: FFIComponent_ MenuAttributes
21+menu = createBuiltinElement_ "menu"
22+
23+type MenuAttributes = BaseAttributesR
24+ ( type :: String
25+ , label :: String
26+ )
test/Example.purs+18−15
@@ -133,19 +133,22 @@ formExample = H.div { className: "myForm" }
133133 [ H.input { type: "text", placeholder: "Type something", className: "inputField" }
134134 , H.input { type: "submit", value: "Submit", className: "submitBtn" }
135135 ]
136− , H.select { name: "mySelect", className: "selectField" }
137− [ H.option { value: "Option1" } "Option 1"
138− , H.option { value: "Option2" } "Option 2"
139− ]
140− , H.img { src: "https://images.unsplash.com/photo-1567201864585-6baec9110dac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", alt: "My Image", className: "myImage" }
141− , H.span { className: "mySpan" } "Some text in a span element"
142− , H.header { className: "myHeader" } "This is a header"
143− , H.section { className: "mySection" } "This is a section"
144− , H.iframeWithChildren { src: "https://www.example.com", className: "myIframe" } "Content of the iframe"
145− , H.abbr { title: "abbreviation" } "abbr"
146− , H.meter { min: "0", max: "100", value: "70" } []
147− , H.meta
148− , H.progress { value: "32", max: "100" } []
149− , H.audio { controls: "" }
150− $ H.source { src: "path/to/audio.mp3", type: "audio/mpeg" }
136+-- , H.select { name: "mySelect", className: "selectField" }
137+-- [ H.option { value: "Option1" } "Option 1"
138+-- , H.option { value: "Option2" } "Option 2"
139+-- ]
140+-- , H.img { src: "https://images.unsplash.com/photo-1567201864585-6baec9110dac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80", alt: "My Image", className: "myImage" }
141+-- , H.span { className: "mySpan" } "Some text in a span element"
142+-- , H.header { className: "myHeader" } "This is a header"
143+-- , H.section { className: "mySection" } "This is a section"
144+-- , H.iframeWithChildren { src: "https://www.example.com", className: "myIframe" } "Content of the iframe"
145+-- , H.abbr { title: "abbreviation" } "abbr"
146+-- , H.meter { min: "0", max: "100", value: "70" } []
147+ , H.input { valu: "hi" }
148+-- , H.progress { value: "32", max: "100" } []
149+-- , H.audio { controls: "" }
150+-- $ H.source { src: "path/to/audio.mp3", type: "audio/mpeg" }
151+
151152 ]
153+
154+x y = y.a + y.b + y.c