Add createElement

.gitignore

@@ -8,3 +8,4 @@
 /.purs*
 /.psa*
 /.spago
+index.js

spago.dhall

@@ -19,7 +19,7 @@ to generate this file without the comments in this block.
   , "nullable"
   , "prelude"
   , "react-basic"
-  , "react-basic-dom"
+  , "react-basic-hooks"
   , "record"
   , "type-equality"
   , "typelevel-prelude"

spago.test.dhall

@@ -2,7 +2,7 @@ let conf = ./spago.dhall
 
 let dependencies = ["console", "spec", "node-fs-aff", "aff", "node-buffer", "react-basic-hooks", "foldable-traversable", "tuples" ]
 
-let sources = [ "test/**/*.purs" ]
+let sources = [ "src/**/*.purs", "test/**/*.purs" ]
 
 in conf //
   { dependencies = conf.dependencies # dependencies

src/Beta/DOM/HTML/Abbr.purs

@@ -13,4 +13,4 @@ import Beta.DOM.Internal (FFIComponent, FFIComponent_, createBuiltinElement, cre
 -- | ```
 -- |
 abbr :: FFIComponent BaseAttributes
-abbr = createBuiltinElement "abbr"
+abbr = createBuiltinElement "abbr"

src/Beta/DOM/HTML/Article.purs

@@ -12,7 +12,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- |
 -- | #### Example:
 -- | ```purescript
--- | article { className: "blog-post" } [ h1 { } "Blog Post Title", p { } "Content of the blog post" ]
+-- | article { className: "blog-post" } [ h1 {} "Blog Post Title", p {} "Content of the blog post" ]
 -- | ```
 article :: FFIComponent BaseAttributes
 article = createBuiltinElement "article"

src/Beta/DOM/HTML/Bdi.purs

@@ -12,7 +12,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- |
 -- | #### Example:
 -- | ```purescript
--- | bdi { } "Text in unknown direction"
+-- | bdi {} "Text in unknown direction"
 -- | ```
 bdi :: FFIComponent BaseAttributes
 bdi = createBuiltinElement "bdi"

src/Beta/DOM/HTML/Del.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- |
 -- | #### Example:
 -- | ```purescript
--- | del { } "This text has been deleted from the document."
+-- | del {} "This text has been deleted from the document."
 -- | ```
 del :: FFIComponent BaseAttributes
 del = createBuiltinElement "del"

src/Beta/DOM/HTML/Dl.purs

@@ -10,11 +10,11 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- |
 -- | #### Example:
 -- | ```purescript
--- | dl { }
--- |  [ dt { } "Term 1"
--- |  , dd { } "Description of Term 1"
--- |  , dt { } "Term 2"
--- |  , dd { } "Description of Term 2"
+-- | dl {}
+-- |  [ dt {} "Term 1"
+-- |  , dd {} "Description of Term 1"
+-- |  , dt {} "Term 2"
+-- |  , dd {} "Description of Term 2"
 -- |  ]
 -- | ```
 dl :: FFIComponent BaseAttributes

src/Beta/DOM/HTML/Dt.purs

@@ -11,7 +11,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- |
 -- | #### Example:
 -- | ```purescript
--- | dt { } "Term 1"
+-- | dt {} "Term 1"
 -- | ```
 dt :: FFIComponent BaseAttributes
 dt = createBuiltinElement "dt"

src/Beta/DOM/HTML/Em.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- |
 -- | #### Example:
 -- | ```purescript
--- | em { } "This text is emphasised."
+-- | em {} "This text is emphasised."
 -- | ```
 em :: FFIComponent BaseAttributes
 em = createBuiltinElement "em"

src/Beta/DOM/HTML/I.purs

@@ -11,7 +11,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | i { } "This text is rendered in italics."
+-- | i {} "This text is rendered in italics."
 -- | ```
 i :: FFIComponent BaseAttributes
 i = createBuiltinElement "i"

src/Beta/DOM/HTML/Kbd.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | kbd { } "Ctrl + P"
+-- | kbd {} "Ctrl + P"
 -- | ```
 kbd :: FFIComponent BaseAttributes
 kbd = createBuiltinElement "kbd"

src/Beta/DOM/HTML/Label.purs

@@ -4,6 +4,8 @@ import Prelude
 
 import Beta.DOM.Attributes (BaseAttributesR)
 import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
+import Unsafe.Coerce (unsafeCoerce)
+import Prim.Row (class Union)
 
 -- | The `<label>` HTML element represents a caption for an item in a user interface.
 -- | It can be associated with a control either by placing the control element inside the `<label>` element,
@@ -30,4 +32,4 @@ label = createBuiltinElement "label"
 
 type LabelAttributes = BaseAttributesR
   ( htmlFor :: String
-  )
+  )

src/Beta/DOM/HTML/Mark.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | mark { } "This text is highlighted."
+-- | mark {} "This text is highlighted."
 -- | ```
 --
 -- | #### Common attributes:

src/Beta/DOM/HTML/Meta.purs

@@ -33,14 +33,17 @@ type MetaAttributes =
 -- | meta { name: "twitter:title", content: "The Title of the Webpage" }
 -- | meta { name: "twitter:description", content: "The description of the webpage." }
 -- | meta { name: "twitter:image", content: "https://example.com/path/to/image.jpg" }
+-- | ```
 -- |
 -- | Common attributes:
--- || Attribute     | Type     | Example                                 | Description |
--- ||---------------|----------|-----------------------------------------|-------------|
--- || `charSet`     | `String` | `"UTF-8"`                               | Specifies the character encoding for the HTML document. |
--- || `content`     | `String` | `"width=device-width, initial-scale=1"` | Gives the value associated with the `http-equiv` or `name` attribute. |
--- || `http-equiv`  | `String` | `"refresh"`                             | Provides an HTTP header for the information/value of the content attribute. |
--- || `name`        | `String` | `"description"`                         | Defines a name for the metadata.
--- || `property`    | `String` | `"og:title"`                            | Defines the property the metadata should be associated with.
+-- |
+-- || Attribute  | Type     | Example                                 | Description |
+-- ||------------|----------|-----------------------------------------|-------------|
+-- || `charSet`  | `String` | `"UTF-8"`                               | Specifies the character encoding for the HTML document. |
+-- || `content`  | `String` | `"width=device-width, initial-scale=1"` | Gives the value associated with the `http-equiv` or `name` attribute. |
+-- || `http-equiv` | `String` | `"refresh"`                             | Provides an HTTP header for the information/value of the content attribute. |
+-- || `name`     | `String` | `"description"`                         | Defines a name for the metadata. |
+-- || `property` | `String` | `"og:title"`                            | Defines the property the metadata should be associated with. |meta :: FFIComponent_ MetaAttributes
+-- |
 meta :: FFIComponent_ MetaAttributes
 meta = createBuiltinElement_ "meta"

src/Beta/DOM/HTML/NoScript.purs

@@ -1,3 +1,20 @@
-module Beta.DOM.HTML.NoScript where
+module Beta.DOM.HTML.NoScript (noscript) where
 
 import Prelude
+import Beta.DOM.Attributes (BaseAttributes)
+import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
+
+-- | The `<noscript>` tag in HTML, used to provide an alternative content for users
+-- | that have disabled scripts in their browser or have a browser that doesn't support script.
+-- |
+-- | #### Example:
+-- | ```purescript
+-- | noscript {}
+-- |   "Your browser does not support JavaScript!"
+-- | ```
+-- |
+-- | ## Common attributes:
+-- |
+-- | No standard attributes.
+noscript :: FFIComponent BaseAttributes
+noscript = createBuiltinElement "noscript"

src/Beta/DOM/HTML/Option.purs

@@ -18,7 +18,6 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | | Name            | Type   | Example       | Description                        |
 -- | |-----------------|--------|---------------|------------------------------------|
 -- | | `label`         | String | "Group 1"     | Label for the option group         |
-
 option :: FFIComponent OptionAttributes
 option = createBuiltinElement "option"
 

src/Beta/DOM/HTML/Output.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | output { } "Result goes here."
+-- | output {} "Result goes here."
 -- | ```
 output :: FFIComponent BaseAttributes
 output = createBuiltinElement "output"

src/Beta/DOM/HTML/P.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | p { } "This is a paragraph."
+-- | p {} "This is a paragraph."
 -- | ```
 p :: FFIComponent BaseAttributes
 p = createBuiltinElement "p"

src/Beta/DOM/HTML/Picture.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | picture { }
+-- | picture {}
 -- |   [ source { srcset: "large.jpg", media: "(min-width: 800px)" }
 -- |   , source { srcset: "medium.jpg", media: "(min-width: 600px)" }
 -- |   , img { src: "small.jpg", alt: "Description of the image" }

src/Beta/DOM/HTML/Pre.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | pre { } " Preformatted text goes here. "
+-- | pre {} " Preformatted text goes here. "
 -- | ```
 --
 -- | #### Common attributes:
@@ -18,6 +18,5 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | | Name | Type | Example | Description |
 -- | |------|------|---------|-------------|
 -- | | `className` | String | "codeBlock" | CSS class of the element |
-
 pre :: FFIComponent BaseAttributes
 pre = createBuiltinElement "pre"

src/Beta/DOM/HTML/Rp.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | rp { } "(fallback content)"
+-- | rp {} "(fallback content)"
 -- | ```
 rp :: FFIComponent BaseAttributes
 rp = createBuiltinElement "rp"

src/Beta/DOM/HTML/Rt.purs

@@ -11,7 +11,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | rt { } "Pronunciation goes here."
+-- | rt {} "Pronunciation goes here."
 -- | ```
 --
 -- | #### Common attributes:

src/Beta/DOM/HTML/Ruby.purs

@@ -11,7 +11,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | ruby { } "Ruby annotation goes here."
+-- | ruby {} "Ruby annotation goes here."
 -- | ```
 --
 -- | #### Common attributes:

src/Beta/DOM/HTML/S.purs

@@ -11,7 +11,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | s { } "This text is no longer accurate."
+-- | s {} "This text is no longer accurate."
 -- | ```
 s :: FFIComponent BaseAttributes
 s = createBuiltinElement "s"

src/Beta/DOM/HTML/Samp.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | samp { } "Program output goes here"
+-- | samp {} "Program output goes here"
 -- | ```
 samp :: FFIComponent BaseAttributes
 samp = createBuiltinElement "samp"

src/Beta/DOM/HTML/Section.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | section { } "Section content goes here."
+-- | section {} "Section content goes here."
 -- | ```
 section :: FFIComponent BaseAttributes
 section = createBuiltinElement "section"

src/Beta/DOM/HTML/Source.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent_, createBuiltinElement_)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | picture { }
+-- | picture {}
 -- |   [ source { srcset: "image-large.jpg", media: "(min-width: 800px)", type: "image/jpeg" }
 -- |   , source { srcset: "image-medium.jpg", media: "(min-width: 600px)", type: "image/jpeg" }
 -- |   , img { src: "image-small.jpg", alt: "Description" }

src/Beta/DOM/HTML/Strong.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | strong { } "Important text goes here."
+-- | strong {} "Important text goes here."
 -- | ```
 strong :: FFIComponent BaseAttributes
 strong = createBuiltinElement "strong"

src/Beta/DOM/HTML/Sub.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | sub { } "Subscript text goes here."
+-- | sub {} "Subscript text goes here."
 -- | ```
 --
 -- | #### Common attributes:

src/Beta/DOM/HTML/Table.purs

@@ -10,7 +10,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | #### Example:
 -- |
 -- | ```purescript
--- | table { }
+-- | table {}
 -- |   [ thead {}
 -- |     [ tr {} [ th {} "Header No. 1", th {} "Header No. 2" ]
 -- |   , tbody {}

src/Beta/DOM/HTML/Td.purs

@@ -12,6 +12,5 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | ```purescript
 -- | td {} "Finally the content of the cell"
 -- | ```
---
 td :: FFIComponent BaseAttributes
 td = createBuiltinElement "td"

src/Beta/DOM/HTML/Textarea.purs

@@ -19,11 +19,10 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | |---------|--------|------------------|-------------|
 -- | | `cols`   | Int | 50 | Specifies the visible width |
 -- | | `rows`   | Int | 5 | Specifies the visible number of lines |
+textarea :: FFIComponent TextareaAttributes
+textarea = createBuiltinElement "textarea"
 
 type TextareaAttributes = BaseAttributesR
   ( cols :: Int
   , rows :: Int
-  )
-
-textarea :: FFIComponent TextareaAttributes
-textarea = createBuiltinElement "textarea"
+  )

src/Beta/DOM/HTML/Time.purs

@@ -12,7 +12,7 @@ import Beta.DOM.Internal (FFIComponent, createBuiltinElement)
 -- | ```purescript
 -- | time { datetime: "2024-02-14" } "Valentine's Day"
 -- | ```
---
+-- |
 -- | #### Common attributes:
 -- |
 -- | | Name        | Type   | Example     | Description |

src/Beta/DOM/HTML/Track.purs

@@ -12,7 +12,7 @@ import Beta.DOM.Internal (FFIComponent_, createBuiltinElement_)
 -- | ```purescript
 -- | track { kind: "subtitles", src: "subs_eng.srt", srcLang: "en" }
 -- | ```
---
+-- |
 -- | #### Common attributes:
 -- |
 -- | | Name    | Type   | Example     | Description |

src/Beta/DOM/Internal.js

@@ -5,13 +5,12 @@ export const modifyIfDefinedImpl = (key, fn, obj) => {
     if (!obj.hasOwnProperty(key)) return obj
     return {...obj, [key]: fn(obj[key])}
 }
-export const createBuiltinElementImpl = (name, props, children) => {
-    if ( typeof children === undefined || children == null || children.length === 0) return React.createElement(name, props)
+export const createElementImpl = (name, props, children) => {
+    if (typeof children === undefined || children == null || children.length === 0) return React.createElement(name, props)
     if (!Array.isArray(children)) return React.createElement(name, props, children)
     return React.createElement(name, props, ...children)
 }
 
-export const createBuiltinElementNoKidsImpl = React.createElement
-
+export const createElementNoKidsImpl = React.createElement
 
 export const mergeStyles = (styles) => Object.assign.apply(null, [{}].concat(styles))

src/Beta/DOM/Internal.purs

@@ -11,19 +11,26 @@ import Prim.RowList (class RowToList, RowList)
 import Prim.Symbol as Symbol
 import Prim.TypeError (class Fail, class Warn, Text)
 import React.Basic (JSX, ReactComponent)
+import React.Basic.Hooks (ReactChildren)
 import Type.Equality (class TypeEquals)
 import Type.RowList (class ListToRow)
 import Type.RowList as RL
 import Unsafe.Coerce (unsafeCoerce)
 
-foreign import createBuiltinElementImpl :: forall props children. Fn3 String props children JSX
-foreign import createBuiltinElementNoKidsImpl :: forall props. Fn2 String props JSX
+foreign import createElementImpl :: forall component props children. Fn3 component props children JSX
+foreign import createElementNoKidsImpl :: forall component props. Fn2  component props JSX
 
 createBuiltinElement :: forall props children. String -> props -> children -> JSX
-createBuiltinElement = runFn3 createBuiltinElementImpl
+createBuiltinElement = runFn3 createElementImpl
 
 createBuiltinElement_ :: forall props. String -> props -> JSX
-createBuiltinElement_ props = runFn2 createBuiltinElementNoKidsImpl props
+createBuiltinElement_ props = runFn2 createElementNoKidsImpl props
+
+createElement :: forall props props_ children. IsJSX children => Cons "children" (ReactChildren JSX) props_ props => ReactComponent {|props} -> {|props_} -> children -> JSX
+createElement = runFn3 createElementImpl
+
+createElement_ :: forall props. ReactComponent props -> props -> JSX
+createElement_ = runFn2 createElementNoKidsImpl
 
 foreign import unsafeWithChildrenImpl :: forall c p. Fn2 c p p
 

test/Example.purs

@@ -98,7 +98,7 @@ articleExample = H.article { className: "px-8" }
       , text "C"
       , H.sub { className: "text" } "1"
       ]
-   , H.h3 {} "<address>"
+  , H.h3 {} "<address>"
   , H.address { className: "footer" } "1234 Main St, Anytown, USA"
   ]
 
@@ -144,6 +144,7 @@ formExample = H.div { className: "myForm" }
   , H.iframeWithChildren { src: "https://www.example.com", className: "myIframe" } "Content of the iframe"
   , H.abbr { title: "abbreviation" } "abbr"
   , H.meter { min: "0", max: "100", value: "70" } []
+  , H.meta
   , H.progress { value: "32", max: "100" } []
   , H.audio { controls: "" }
       $ H.source { src: "path/to/audio.mp3", type: "audio/mpeg" }