🍚 Add html & svg components.

Author: T4rk1n

.prettierignore

@@ -0,0 +1,2 @@
+src/html/components
+src/svg

dazzler/assets/meta-ts.js

@@ -136,7 +136,11 @@ function walk(directory, components = {}) {
             return 'bool';
         } else if (propName === '[]') {
             return 'array';
-        } else if (propName === 'Element') {
+        } else if (
+            propName === 'Element'
+            || propName === 'ReactNode'
+            || propName === 'ReactElement'
+        ) {
             return 'node';
         }
         return propName
@@ -265,7 +269,7 @@ function walk(directory, components = {}) {
                     tags.map((t) =>
                         R.concat(
                             ['@', t.name],
-                            t.text.map((e) => e.text)
+                            (t.text || []).map((e) => e.text)
                         )
                     )
                 )
@@ -285,7 +289,9 @@ function walk(directory, components = {}) {
 
             // There is only one parameter for functional components: props
             const p = params[0];
-            if (p.name === 'props' || params.length === 1) return p;
+            if (p.name === 'props' || params.length === 1) {
+                return p;
+            }
         }
         return null;
     };

dazzler/components/html/__init__.py

@@ -0,0 +1,33 @@
+from dazzler.system import (
+    Package as _Package,
+    assets_to_requirements as _ass_to_req
+)
+
+from dazzler._assets import (
+    assets as _assets,
+    assets_dev as _dev,
+    assets_dist_path as _dist_path,
+    assets_dev_path as _dev_path,
+)
+
+from ._imports_ import *  # noqa: F401, F403
+from ._imports_ import __all__
+
+_name = 'html'
+_package_name = f'dazzler_{_name}'
+
+
+_components = []
+for _c in __all__:
+    _components.append(locals()[_c])
+
+package = _Package(
+    _package_name,
+    components=_components,
+    requirements=_ass_to_req(
+        _dist_path, _assets.get(_name, {}),
+        dev_data=_dev.get(_name, {}),
+        dev_path=_dev_path,
+        package_name=_package_name,
+    )
+)

dazzler/components/svg/__init__.py

@@ -0,0 +1,33 @@
+from dazzler.system import (
+    Package as _Package,
+    assets_to_requirements as _ass_to_req
+)
+
+from dazzler._assets import (
+    assets as _assets,
+    assets_dev as _dev,
+    assets_dist_path as _dist_path,
+    assets_dev_path as _dev_path,
+)
+
+from ._imports_ import *  # noqa: F401, F403
+from ._imports_ import __all__
+
+_name = 'svg'
+_package_name = f'dazzler_{_name}'
+
+
+_components = []
+for _c in __all__:
+    _components.append(locals()[_c])
+
+package = _Package(
+    _package_name,
+    components=_components,
+    requirements=_ass_to_req(
+        _dist_path, _assets.get(_name, {}),
+        dev_data=_dev.get(_name, {}),
+        dev_path=_dev_path,
+        package_name=_package_name,
+    )
+)

dazzler/system/_generator.py

@@ -341,6 +341,10 @@ async def generate_components(metadata, output_path, executor):
 
     for data in metadata.values():
         name = data['displayName']
+        props = data.get('props')
+        if not props:
+            print(f'Invalid component {name}')
+            continue
         names.append(name)
         futures.append(
             executor.execute(

justfile

@@ -15,7 +15,7 @@ install:
 alias i := install
 
 # Build everything
-build:
+build: html-generator
     npm run build
 
 alias b := build
@@ -84,6 +84,10 @@ electron:
 electron-build TARGET="dir":
     dazzler -c tests/electron/dazzler.toml electron-build tests/electron/electron_app.py --target {{TARGET}}
 
+# Build the html & svg components.
+html-generator:
+    node src/html/html-generator.js
+
 # Generate a component package:
 generate PACKAGE *ARGS:
     dazzler generate {{src}}/{{PACKAGE}}/js/components {{components}}/{{PACKAGE}} {{ARGS}}

package.json

@@ -13,6 +13,8 @@
     "build:electron:components": "webpack --config webpack.electron-renderer.config.js",
     "build:electron:components::dev": "npm run build:electron:components -- --mode=development",
     "build:dazzler::core": "dazzler generate src/core/js/components dazzler/components/core --ts",
+    "build:dazzler::html": "dazzler generate src/html/components dazzler/components/html --ts",
+    "build:dazzler::svg": "dazzler generate src/svg/components dazzler/components/svg --ts",
     "build:dazzler::test": "dazzler generate src/internal/test_components/components tests/components/spec_components",
     "build:dazzler::ts": "dazzler generate src/internal/ts_components/components tests/components/ts_components --ts",
     "build:dazzler::extra": "dazzler generate src/extra/js/components dazzler/components/extra --ts",
@@ -21,7 +23,7 @@
     "build:dazzler::auth": "dazzler generate src/auth/js/components dazzler/components/auth --ts",
     "build:dazzler::icons": "dazzler generate src/icons/js/components dazzler/components/icons",
     "build:dazzler::electron": "dazzler generate src/electron/renderer/components dazzler/components/electron --ts",
-    "build:dazzler": "run-p build:dazzler::core build:dazzler::test build:dazzler::extra build:dazzler::calendar build:dazzler::markdown build:dazzler::auth build:dazzler::icons build:dazzler::ts build:dazzler::electron",
+    "build:dazzler": "run-p build:dazzler::core build:dazzler::test build:dazzler::extra build:dazzler::calendar build:dazzler::markdown build:dazzler::auth build:dazzler::icons build:dazzler::ts build:dazzler::electron build:dazzler::html build:dazzler::svg",
     "build:docs": "docs/build.sh",
     "build": "run-s build:webpack build:dev build:electron build:electron:components build:electron:components::dev",
     "watch": "npm run build:dev -- --watch",

src/commons/js/casing.ts

@@ -1,4 +1,5 @@
 import {last, slice, toPairs} from 'ramda';
+import {AnyDict} from './types';
 
 export function camelToSnakeCase(s: string): string {
     return s
@@ -38,7 +39,10 @@ export function camelToSpinal(s: string): string {
         .reduce((p, n) => p + n);
 }
 
-export function transformKeys(obj: object, transform: Function): object {
+export function transformKeys(
+    obj: AnyDict,
+    transform: typeof camelToSnakeCase
+): AnyDict {
     // @ts-ignore
     return toPairs(obj).reduce((a, [k, v]) => {
         a[transform(k)] = v;

src/commons/js/enhancer.ts

@@ -0,0 +1,91 @@
+import {DazzlerHtmlProps, UpdateAspectFunc} from './types';
+import {assoc, omit, pipe, pick} from 'ramda';
+
+const omittedProps = [
+    'class_name',
+    'identity',
+    'updateAspects',
+    'handle_clicks',
+    'clicks',
+    'handle_hover',
+    'is_hovered',
+    'handle_load',
+    'is_loaded',
+    'handle_keys',
+    'last_key',
+    'handle_focus',
+    'is_focused',
+];
+
+const clickKeys = [
+    'altKey',
+    'button',
+    'buttons',
+    'clientX',
+    'clientY',
+    'ctrlKey',
+    'metaKey',
+    'movementX',
+    'movementY',
+    'offsetX',
+    'offsetY',
+    'pageX',
+    'pageY',
+    'screenX',
+    'screenY',
+    'shiftKey',
+    'x',
+    'y',
+];
+
+const onClick =
+    (clicks: number, updateAspects: UpdateAspectFunc) => (event: MouseEvent) =>
+        updateAspects({
+            clicks: (clicks || 0) + 1,
+            click_event: pick(clickKeys, event),
+        });
+
+const updateFactory =
+    <T>(key: string, value: T, updateAspects: UpdateAspectFunc) =>
+    () =>
+        updateAspects({[key]: value});
+
+export function enhanceProps(props: DazzlerHtmlProps) {
+    let newProps: any = {
+        ...omit(omittedProps, props),
+        className: props.class_name,
+        id: props.id || props.identity,
+    };
+    if (props.handle_clicks) {
+        newProps = assoc(
+            'onClick',
+            onClick(props.clicks, props.updateAspects),
+            newProps
+        );
+    }
+    if (props.handle_hover) {
+        newProps = pipe(
+            assoc(
+                'onMouseEnter',
+                updateFactory('is_hovered', true, props.updateAspects)
+            ),
+            assoc(
+                'onMouseLeave',
+                updateFactory('is_hovered', false, props.updateAspects)
+            )
+        )(newProps);
+    }
+    if (props.handle_focus) {
+        newProps = pipe(
+            assoc(
+                'onFocus',
+                updateFactory('is_focused', true, props.updateAspects)
+            ),
+            assoc(
+                'onBlur',
+                updateFactory('is_focused', false, props.updateAspects)
+            )
+        )(newProps);
+    }
+    return newProps;
+}

src/commons/js/index.ts

@@ -18,6 +18,7 @@ import {
     transformKeys,
 } from './casing';
 import {getCommonStyles, getPresetsClassNames} from './styling';
+import {enhanceProps} from './enhancer';
 
 export {
     toTimestamp,
@@ -35,4 +36,5 @@ export {
     getCommonStyles,
     getPresetsClassNames,
     throttle,
+    enhanceProps,
 };

src/commons/js/types.d.ts

@@ -1,3 +1,5 @@
+import {AriaAttributes, DOMAttributes} from 'react';
+
 type Dict<T> = {[key: string]: T};
 type StringDict = {[key: string]: string};
 type AnyDict = Dict<any>;
@@ -196,3 +198,35 @@ export interface CommonPresetsProps {
      */
     preset_size?: PresetSize;
 }
+
+type DazzlerHtmlProps = {
+    id?: string;
+
+    handle_clicks?: boolean;
+    clicks?: number;
+    click_event?: any;
+
+    handle_hover?: boolean;
+    is_hovered?: boolean;
+
+    handle_load?: boolean;
+    is_loaded?: boolean;
+
+    handle_focus?: boolean;
+    is_focused?: boolean;
+} & DazzlerProps;
+
+type InvalidHtmlProps =
+    | 'dangerouslySetInnerHTML'
+    | 'defaultChecked'
+    | 'defaultValue'
+    | 'suppressContentEditableWarning'
+    | 'suppressHydrationWarning'
+    | 'className'
+    | 'ref'
+    | 'key'
+    | 'async';
+
+type EventsProps = keyof Omit<DOMAttributes<any>, 'children'>;
+type AriaProps = keyof AriaAttributes;
+type HtmlOmittedProps = InvalidHtmlProps | EventsProps | AriaProps;

src/html/components/A.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {enhanceProps} from 'commons';
+import {HtmlOmittedProps, DazzlerHtmlProps} from '../../commons/js/types';
+
+type Props = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, HtmlOmittedProps> & DazzlerHtmlProps;
+
+const A = (props: Props) => <a {...enhanceProps(props)} />
+
+export default React.memo(A);

src/html/components/Abbr.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {enhanceProps} from 'commons';
+import {HtmlOmittedProps, DazzlerHtmlProps} from '../../commons/js/types';
+
+type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, HtmlOmittedProps> & DazzlerHtmlProps;
+
+const Abbr = (props: Props) => <abbr {...enhanceProps(props)} />
+
+export default React.memo(Abbr);

src/html/components/Address.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {enhanceProps} from 'commons';
+import {HtmlOmittedProps, DazzlerHtmlProps} from '../../commons/js/types';
+
+type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, HtmlOmittedProps> & DazzlerHtmlProps;
+
+const Address = (props: Props) => <address {...enhanceProps(props)} />
+
+export default React.memo(Address);

src/html/components/Area.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {enhanceProps} from 'commons';
+import {HtmlOmittedProps, DazzlerHtmlProps} from '../../commons/js/types';
+
+type Props = Omit<React.DetailedHTMLProps<React.AreaHTMLAttributes<HTMLAreaElement>, HTMLAreaElement>, HtmlOmittedProps> & DazzlerHtmlProps;
+
+const Area = (props: Props) => <area {...enhanceProps(props)} />
+
+export default React.memo(Area);

src/html/components/Article.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {enhanceProps} from 'commons';
+import {HtmlOmittedProps, DazzlerHtmlProps} from '../../commons/js/types';
+
+type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, HtmlOmittedProps> & DazzlerHtmlProps;
+
+const Article = (props: Props) => <article {...enhanceProps(props)} />
+
+export default React.memo(Article);

src/html/components/Aside.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {enhanceProps} from 'commons';
+import {HtmlOmittedProps, DazzlerHtmlProps} from '../../commons/js/types';
+
+type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, HtmlOmittedProps> & DazzlerHtmlProps;
+
+const Aside = (props: Props) => <aside {...enhanceProps(props)} />
+
+export default React.memo(Aside);

src/html/components/Audio.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {enhanceProps} from 'commons';
+import {HtmlOmittedProps, DazzlerHtmlProps} from '../../commons/js/types';
+
+type Props = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, HtmlOmittedProps> & DazzlerHtmlProps;
+
+const Audio = (props: Props) => <audio {...enhanceProps(props)} />
+
+export default React.memo(Audio);

src/html/components/B.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {enhanceProps} from 'commons';
+import {HtmlOmittedProps, DazzlerHtmlProps} from '../../commons/js/types';
+
+type Props = Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, HtmlOmittedProps> & DazzlerHtmlProps;
+
+const B = (props: Props) => <b {...enhanceProps(props)} />
+
+export default React.memo(B);