rw-jsx

• rw-jsx
• Preview
  • rw-jsx
  • rw-jsx-hash-router
  • rw-jsx-store
  • rw-jsx-control
  • rw-jsx-css
• Use
  • Directive
  • Fragment
  • Portal
  • Router
  • Store
  • Style
  • For
  • Show
  • Switch Match

Preview

rw-jsx

[Fragment, Portal]

[reactive, readonly, shallowReactive, shallowReadonly, isReactive, isReadonly, isShallow, isProxy, toRaw]

[ref, shallowRef, isRef, isShallowRef, unref, toRefs, toRef]

[computed]

[effect]

[context, emit, props, slots, children, getContext]

[watch, watchEffect, watchPostEffect, watchSyncEffect, debouncedWatch, throttledWatch]

[nextTick]

[provide, inject]

[onMounted, onBeforeUpdate, onBeforeMount, onUpdated, onBeforeUnmount, onUnmounted ];

[directive]

rw-jsx-hash-router

[createHashRouter, createHistoryRouter, useRoute, useRouter, beforeEach, beforeResolve, afterEach, View, Link]

rw-jsx-store

[defineStore, getStoreById, listStores]

rw-jsx-control

[For, Show, Switch]

rw-jsx-css

[style]

Use

Directive

1directive(String, (el, binding, hooks) => {
2    // mount
3    // ...code
4
5    hooks.mount((binding) => {
6        // mount
7        // ...code
8    });
9    hooks.update((binding) => {
10        // update
11        // ...code
12    });
13    return () => {
14        // cleanup
15        // ...code
16    };
17});
18<div rw-focus={...}></div>;
19<div rw-focus:xxx={...}></div>;
20<div rw-focus:xxx.xxx.xxx...={...}></div>;
21<div rw-focus.xxx.xxx...={...}></div>;

1import { context, emit, children, props, slots, getContext } from 'rw-jsx'
2export default function App(){
3    context()
4    emit('test', "Test Emit")
5    props()
6    slots()
7    children()
8    getContext.ctx
9    getContext.emit
10    getContext.props
11    getContext.slots
12    getContext.children
13    return () => <div>Rw App</div>
14}
15

Fragment

1<>···</>
2<Fragment>···</Fragment>

Portal

1<Portal target={String || Node}>···</Portal>

Router

1const routes = [
2    {
3        path: '/',
4        component: ···
5    },
6    {
7        name: 'About',
8        path: '/about',
9        component: ···,
10        meta: {
11            ···
12        }
13    },
14    {
15        path: '/redirect-about',
16        redirect: '/about'
17    },
18    {
19        path: '/redirect-user',
20        redirect: (route) => console.log(route)
21    },
22    {
23        path: '/user',
24        component: ···,
25        children: [
26            {
27                path: ':id',
28                component: ···
29            },
30            {
31                path: 'setting',
32                component: ···
33            },
34        ]
35    }
36]
37const router = createHashRouter(routes);
38// or
39const router = createHistoryRouter(routes);
40<router.Link to={String || Object}>···</router.Link>
41<router.View>
42    {/** Not 404 */}
43    <div>Not 404</div>
44</router.View>

Store

1const ··· = defineStore(() => {})
2const ··· = defineStore(String, () => {})

Style

1const ··· = style`
2    color: red;
3    bacground: ${props => props.bacground || 'green'}
4    :hover {
5        color: ${props => props.color || '#000000'};
6    }
7`
8const ··· = style`
9    ::before {
10        content: 'before';
11    }
12`
13···.name
14···.value.xxx
15....clear()
16<h1 class={···.name}>Rw App</h1>

For

1const listRef = ref([]);
2<For each={listRef.value} fallback={<p>fallback</p>}>
3    {(item) => <li key={item}>{item}</li>}
4<For>
5

Show

1<Show when={countRef.value % 2 === 0} fallback={<h3>false fallback</h3>}>
2    {() => <h2>true Content fn h2</h2>}
3    <h2>true Content h2</h2>
4    <p>true Content p</p>
5</Show>

Switch Match

1<Switch fallback={<h3>false fallback</h3>}>
2    <Match when={countRef.value > 0 && countRef.value < 5}>
3        <h2>Match Content 1</h2>
4        <h2>Match Content h2</h2>
5        {() => <h2>Match Content fn h2</h2>}
6    </Match>
7    <Match when={countRef.value > 5 && countRef.value < 10}>
8        <h2>Match Content 2</h2>
9    </Match>
10    <Match when={countRef.value > 10 && countRef.value < 15}>
11        <h2>Match Content 3</h2>
12    </Match>
13</Switch>