Expose DOM element ReactComponents

Makefile

@@ -0,0 +1,12 @@
+all: build examples
+
+build: bower_components node_modules
+	npm run build
+
+bower_components: node_modules
+	npx bower --allow-root install
+
+node_modules:
+	npm install
+
+.PHONY: build

codegen/index.js

@@ -14,7 +14,7 @@ import Data.Nullable (Nullable)
 import Foreign.Object (Object)
 import Prim.Row (class Union)
 import Web.DOM (Node)
-import React.Basic (JSX, Ref, element)
+import React.Basic (JSX, ReactComponent, Ref, element)
 import React.Basic.DOM.Internal (CSS, unsafeCreateDOMComponent)
 import React.Basic.Events (EventHandler)
 
@@ -38,9 +38,11 @@ const svgHeader = `-- | ----------------------------------------
 
 module React.Basic.DOM.SVG where
 
+import Data.Nullable (Nullable)
 import Foreign.Object (Object)
 import Prim.Row (class Union)
-import React.Basic (JSX, element)
+import Web.DOM (Node)
+import React.Basic (JSX, ReactComponent, Ref, element)
 import React.Basic.DOM.Internal (SharedSVGProps, unsafeCreateDOMComponent)
 
 `;
@@ -69,20 +71,8 @@ Object.keys(svgProps).forEach(elName => {
 // The attribute list for <svg> in react-html-attributes
 // is wrong (it contains the union of the attributes of all
 // svg elements)
-htmlProps['svg'] = camelCaseSvgProps['svg'].concat([
-  "xlinkActuate",
-  "xlinkArcrole",
-  "xlinkHref",
-  "xlinkRole",
-  "xlinkShow",
-  "xlinkTitle",
-  "xlinkType",
-  "xmlBase",
-  "xmlLang",
-  "xmlSpace",
-  "xmlns",
-  "xmlnsXlink"
-]);
+delete htmlProps.elements.html[htmlProps.elements.html.indexOf("svg")];
+delete htmlProps["svg"];
 
 const printRecord = (e, elProps) =>
   elProps.length
@@ -91,7 +81,9 @@ const printRecord = (e, elProps) =>
   )`
     : "()";
 
-const generatePropTypes = (elements, props, sharedPropType) => 
+const reactProps = ["ref", "key", "_data"];
+
+const generatePropTypes = (elements, props, sharedPropType) =>
   elements.map(e => {
     const noChildren = voids.includes(e);
     const symbol = reserved.includes(e) ? `${e}'` : e;
@@ -100,15 +92,26 @@ const generatePropTypes = (elements, props, sharedPropType) =>
 
     return `
     type Props_${e} =${printRecord(e,
-      (noChildren ? [] : ["children", "_data"]).concat(props[e] || [], props["*"] || []).sort()
+      ( noChildren
+        ? reactProps
+        : reactProps.concat("children")
+      )
+        .concat(props[e] || [], props["*"] || [])
+        .sort()
     )}
 
     ${symbol}
       :: forall attrs attrs_
        . Union attrs attrs_ ${propType}
       => Record attrs
       -> JSX
-    ${symbol} = element (unsafeCreateDOMComponent "${e}")${
+    ${symbol} = element ${symbol}'
+
+    ${symbol}'
+      :: forall attrs attrs_
+       . Union attrs attrs_ ${propType}
+      => ReactComponent (Record attrs)
+    ${symbol}' = unsafeCreateDOMComponent "${e}"${
       noChildren
         ? ""
         : `

codegen/react-html-attributes.json

@@ -44,7 +44,6 @@
     "itemRef",
     "itemScope",
     "itemType",
-    "key",
     "keyParams",
     "keyType",
     "lang",
@@ -109,7 +108,6 @@
     "property",
     "radioGroup",
     "readOnly",
-    "ref",
     "resource",
     "role",
     "rowSpan",

src/React/Basic.purs

@@ -301,9 +301,6 @@ foreign import fragment :: Array JSX -> JSX
 
 -- | Create a `JSX` node from a `ReactComponent`, by providing the props.
 -- |
--- | This function is for non-React-Basic React components, such as those
--- | imported from FFI.
--- |
 -- | __*See also:* `ReactComponent`, `elementKeyed`__
 element
   :: forall props
@@ -314,9 +311,6 @@ element = runFn2 element_
 
 -- | Create a `JSX` node from a `ReactComponent`, by providing the props and a key.
 -- |
--- | This function is for non-React-Basic React components, such as those
--- | imported from FFI.
--- |
 -- | __*See also:* `ReactComponent`, `element`, React's documentation regarding the special `key` prop__
 elementKeyed
   :: forall props

src/React/Basic/DOM.purs

@@ -28,7 +28,7 @@ import Effect (Effect)
 import Effect.Exception (Error, throw, try)
 import Effect.Uncurried (EffectFn1, EffectFn3, runEffectFn1, runEffectFn3)
 import React.Basic (ReactComponentInstance, JSX)
-import React.Basic.DOM.Generated (Props_a, Props_abbr, Props_address, Props_area, Props_article, Props_aside, Props_audio, Props_b, Props_base, Props_bdi, Props_bdo, Props_blockquote, Props_body, Props_br, Props_button, Props_canvas, Props_caption, Props_cite, Props_code, Props_col, Props_colgroup, Props_data, Props_datalist, Props_dd, Props_del, Props_details, Props_dfn, Props_dialog, Props_div, Props_dl, Props_dt, Props_em, Props_embed, Props_fieldset, Props_figcaption, Props_figure, Props_footer, Props_form, Props_h1, Props_h2, Props_h3, Props_h4, Props_h5, Props_h6, Props_head, Props_header, Props_hgroup, Props_hr, Props_html, Props_i, Props_iframe, Props_img, Props_input, Props_ins, Props_kbd, Props_keygen, Props_label, Props_legend, Props_li, Props_link, Props_main, Props_map, Props_mark, Props_math, Props_menu, Props_menuitem, Props_meta, Props_meter, Props_nav, Props_noscript, Props_object, Props_ol, Props_optgroup, Props_option, Props_output, Props_p, Props_param, Props_picture, Props_pre, Props_progress, Props_q, Props_rb, Props_rp, Props_rt, Props_rtc, Props_ruby, Props_s, Props_samp, Props_script, Props_section, Props_select, Props_slot, Props_small, Props_source, Props_span, Props_strong, Props_style, Props_sub, Props_summary, Props_sup, Props_svg, Props_table, Props_tbody, Props_td, Props_template, Props_textarea, Props_tfoot, Props_th, Props_thead, Props_time, Props_title, Props_tr, Props_track, Props_u, Props_ul, Props_var, Props_video, Props_wbr, a, a_, abbr, abbr_, address, address_, area, article, article_, aside, aside_, audio, audio_, b, b_, base, bdi, bdi_, bdo, bdo_, blockquote, blockquote_, body, body_, br, button, button_, canvas, canvas_, caption, caption_, cite, cite_, code, code_, col, colgroup, colgroup_, data', data_, datalist, datalist_, dd, dd_, del, del_, details, details_, dfn, dfn_, dialog, dialog_, div, div_, dl, dl_, dt, dt_, em, em_, embed, fieldset, fieldset_, figcaption, figcaption_, figure, figure_, footer, footer_, form, form_, h1, h1_, h2, h2_, h3, h3_, h4, h4_, h5, h5_, h6, h6_, head, head_, header, header_, hgroup, hgroup_, hr, html, html_, i, i_, iframe, iframe_, img, input, ins, ins_, kbd, kbd_, keygen, keygen_, label, label_, legend, legend_, li, li_, link, main, main_, map, map_, mark, mark_, math, math_, menu, menu_, menuitem, menuitem_, meta, meter, meter_, nav, nav_, noscript, noscript_, object, object_, ol, ol_, optgroup, optgroup_, option, option_, output, output_, p, p_, param, picture, picture_, pre, pre_, progress, progress_, q, q_, rb, rb_, rp, rp_, rt, rt_, rtc, rtc_, ruby, ruby_, s, s_, samp, samp_, script, script_, section, section_, select, select_, slot, slot_, small, small_, source, span, span_, strong, strong_, style, style_, sub, sub_, summary, summary_, sup, sup_, svg, svg_, table, table_, tbody, tbody_, td, td_, template, template_, textarea, textarea_, tfoot, tfoot_, th, th_, thead, thead_, time, time_, title, title_, tr, tr_, track, u, u_, ul, ul_, var, var_, video, video_, wbr) as Generated
+import React.Basic.DOM.Generated (Props_a, Props_abbr, Props_address, Props_area, Props_article, Props_aside, Props_audio, Props_b, Props_base, Props_bdi, Props_bdo, Props_blockquote, Props_body, Props_br, Props_button, Props_canvas, Props_caption, Props_cite, Props_code, Props_col, Props_colgroup, Props_data, Props_datalist, Props_dd, Props_del, Props_details, Props_dfn, Props_dialog, Props_div, Props_dl, Props_dt, Props_em, Props_embed, Props_fieldset, Props_figcaption, Props_figure, Props_footer, Props_form, Props_h1, Props_h2, Props_h3, Props_h4, Props_h5, Props_h6, Props_head, Props_header, Props_hgroup, Props_hr, Props_html, Props_i, Props_iframe, Props_img, Props_input, Props_ins, Props_kbd, Props_keygen, Props_label, Props_legend, Props_li, Props_link, Props_main, Props_map, Props_mark, Props_math, Props_menu, Props_menuitem, Props_meta, Props_meter, Props_nav, Props_noscript, Props_object, Props_ol, Props_optgroup, Props_option, Props_output, Props_p, Props_param, Props_picture, Props_pre, Props_progress, Props_q, Props_rb, Props_rp, Props_rt, Props_rtc, Props_ruby, Props_s, Props_samp, Props_script, Props_section, Props_select, Props_slot, Props_small, Props_source, Props_span, Props_strong, Props_style, Props_sub, Props_summary, Props_sup, Props_table, Props_tbody, Props_td, Props_template, Props_textarea, Props_tfoot, Props_th, Props_thead, Props_time, Props_title, Props_tr, Props_track, Props_u, Props_ul, Props_var, Props_video, Props_wbr, a, a', a_, abbr, abbr', abbr_, address, address', address_, area, area', article, article', article_, aside, aside', aside_, audio, audio', audio_, b, b', b_, base, base', bdi, bdi', bdi_, bdo, bdo', bdo_, blockquote, blockquote', blockquote_, body, body', body_, br, br', button, button', button_, canvas, canvas', canvas_, caption, caption', caption_, cite, cite', cite_, code, code', code_, col, col', colgroup, colgroup', colgroup_, data', data'', data_, datalist, datalist', datalist_, dd, dd', dd_, del, del', del_, details, details', details_, dfn, dfn', dfn_, dialog, dialog', dialog_, div, div', div_, dl, dl', dl_, dt, dt', dt_, em, em', em_, embed, embed', fieldset, fieldset', fieldset_, figcaption, figcaption', figcaption_, figure, figure', figure_, footer, footer', footer_, form, form', form_, h1, h1', h1_, h2, h2', h2_, h3, h3', h3_, h4, h4', h4_, h5, h5', h5_, h6, h6', h6_, head, head', head_, header, header', header_, hgroup, hgroup', hgroup_, hr, hr', html, html', html_, i, i', i_, iframe, iframe', iframe_, img, img', input, input', ins, ins', ins_, kbd, kbd', kbd_, keygen, keygen', keygen_, label, label', label_, legend, legend', legend_, li, li', li_, link, link', main, main', main_, map, map', map_, mark, mark', mark_, math, math', math_, menu, menu', menu_, menuitem, menuitem', menuitem_, meta, meta', meter, meter', meter_, nav, nav', nav_, noscript, noscript', noscript_, object, object', object_, ol, ol', ol_, optgroup, optgroup', optgroup_, option, option', option_, output, output', output_, p, p', p_, param, param', picture, picture', picture_, pre, pre', pre_, progress, progress', progress_, q, q', q_, rb, rb', rb_, rp, rp', rp_, rt, rt', rt_, rtc, rtc', rtc_, ruby, ruby', ruby_, s, s', s_, samp, samp', samp_, script, script', script_, section, section', section_, select, select', select_, slot, slot', slot_, small, small', small_, source, source', span, span', span_, strong, strong', strong_, style, style', style_, sub, sub', sub_, summary, summary', summary_, sup, sup', sup_, table, table', table_, tbody, tbody', tbody_, td, td', td_, template, template', template_, textarea, textarea', textarea_, tfoot, tfoot', tfoot_, th, th', th_, thead, thead', thead_, time, time', time_, title, title', title_, tr, tr', tr_, track, track', u, u', u_, ul, ul', ul_, var, var', var_, video, video', video_, wbr, wbr') as Generated
 import React.Basic.DOM.Internal (CSS, css, mergeStyles, unsafeCreateDOMComponent) as Internal
 import Unsafe.Coerce (unsafeCoerce)
 import Web.DOM (Element, Node)