rw-indirect

• rw-indirect
  • Build Instructions
  • Built-in Components
  • Attributes
  • Directive
  • provide-inject
  • life cycle
  • Render
  • Not finished describing

Build Instructions

npm init rw-indirect <project-name || null>
npm create rw-indirect <project-name || null>

Built-in Components

• Fragment
  • describe: No parent container
  • props: [ ]
  • use

    1<Fragment>...code</Fragment>

• Portal
  • describe: Insert into an element
  • props: [ target: String | Element ]
  • use

    1<Portal target={'#portal'}>...code</Portal>

• Index
  • describe: Loop data
  • props: [ each: Array ]
  • use

    1<Index each={[]}>...code</Index>

• For
  • describe: Loop data
  • props: [ each: Array, key?: (item: any) => any ]
  • use

    1<For each={[1,2,3,4]} key={(item) => item}>...code</For>

• Visible
  • describe: Set the display CSS property of an inline style
  • props: [ key: Boolean ]
  • use

    1<Visible key={true}>...code</Visible>

• Switch
  • describe: Tag Switch
  • props: [ key: any ]
  • relevance component: [ Case, Default ]
  • use

    1const changeRef = ref(0)
    2<button onClick={() => changeRef.value++}>add</button>
    3<Switch key={changeRef}>
    4   <Case value={0}></Case>
    5   <Case value={1}></Case>
    6   <Case value={2}></Case>
    7   <Default></Default>
    8</Switch>

• Async
  • describe: Request data asynchronously
  • props: [ promise: Promise | Ref ]
  • reslevance component: [ Await, Then, Catch, Finally ]
  • use

    1const getTodo = async () => {
    2  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    3  const data = await res.json();
    4  await waiting(1000);
    5  return data;
    6};
    7const promiseRef = ref(getTodo());
    8<button onClick={() => (promiseRef.value = getTodo())}>Get Todo</button>
    9<Async promise={promiseRef}>
    10    <Await>...code</Await>
    11    <Then>...code</Then>
    12    <Catch>...code</Catch>
    13    <Finally>...code</Finally>
    14</Async>

• Match
  • describe: Labeled judgment
  • props: [ ]
  • reslevance component: [ Show, Otherwise ]
  • use

    1const count = ref(0);
    2<button onClick={() => (count.value ++)}>Count: {count}</button>
    3<Match>
    4  <Show when={() => count.value > 0 && count.value < 5}>
    5      <div>Show 1 - 4</div>
    6  </Show>
    7  <Show when={() => count.value > 5 && count.value < 10}>
    8      <div>Show 6 - 9</div>
    9  </Show>
    10  <Otherwise>
    11      <div>Otherwise</div>
    12  </Otherwise>
    13</Match>

Attributes

Unique processing attributes

• describe: Read some attributes of the element
• value: [ Ref | Function ]
• use
  • get:scrollTop
  • get:scrollHeight
  • get:scrollWidth
  • get:scrollLeft
  • get:clientWidth
  • get:clientHeight
  • get:clientLeft
  • get:clientTop
  • get:offsetWidth
  • get:offsetHeight
  • get:offsetLeft
  • get:offsetTop

    1    const offsetWidth = ref(0);
    2    <div get:offsetWidth={offsetWidth}></div>
    3
    4    <!-- Deprecated  -->
    5    <div get:offsetWidth={(width) => (offsetWidth.value = width)}></div>

Form binding

• describe: Simplify form writing
• use
  • bind:value

    1  const message = ref('Rw Indirect Message');
    2  <span>Multiline message is:</span>
    3  <p style='white-space: pre-line;'>{message}</p>
    4  <textarea bind:value={message} placeholder='add multiple lines'></textarea>
    5  <p>Message is: {message}</p>
    6  <input bind:value={message} placeholder='edit me' />

  • bind:checked

    1  const checked = ref(false);
    2  <input type='checkbox' id='checkbox' bind:checked={checked} />
    3  <label for='checkbox'>{checked}</label>

    1  const picked = ref('One');
    2  <div>Picked: {picked}</div>
    3  <input type='radio' id='one' value='One' bind:checked={picked} />
    4  <label for='one'>One</label>
    5  <input type='radio' id='two' value='Two' bind:checked={picked} />
    6  <label for='two'>Two</label>

  • bind:group

    1  const checkedNames = ref(['Jack']);
    2  <div>Checked names: {checkedNames}</div>
    3  <input type='checkbox' id='jack' value='Jack' bind:group={checkedNames} />
    4  <label for='jack'>Jack</label>
    5  <input type='checkbox' id='john' value='John' bind:group={checkedNames} />
    6  <label for='john'>John</label>
    7  <input type='checkbox' id='mike' value='Mike' bind:group={checkedNames} />
    8  <label for='mike'>Mike</label>

  • bind:selected

    1  const selected = ref('B');
    2  const options = ref([
    3      { text: 'One', value: 'A' },
    4      { text: 'Two', value: 'B' },
    5      { text: 'Three', value: 'C' },
    6  ]);
    7  <div>Selected: {selected}</div>
    8  <select bind:selected={selected}>
    9      <Index each={options}>
    10          {(option) => <option value={option.value.value}>{option.value.text}</option>}
    11      </Index>
    12  </select>

    1  const selected = ref([]);
    2  <div>Selected: {selected}</div>
    3  <select bind:selected={selected} multiple>
    4      <option>A</option>
    5      <option>B</option>
    6      <option>C</option>
    7  </select>

    1  const selected = ref('');
    2  <div>Selected: {selected}</div>
    3  <select bind:selected={selected}>
    4      <option disabled value=''>
    5          Please select one
    6      </option>
    7      <option>A</option>
    8      <option>B</option>
    9      <option>C</option>
    10  </select>

Directive

• describe: Convenience properties
• use

  1directive('focus',(el, binding, updateHook) => {
  2  console.log(el, binding);
  3  updateHook((newValue, oldValue) => {});
  4  return () => {
  5    // cleanup code
  6  }
  7})
  8// Can have parameters: rw-value:arg$trim$number...
  9<input rw-focus />

  1<!-- Deprecated -->
  2function focus(el){
  3  el.focus();
  4  return () => {
  5    // cleanup code
  6  }
  7}
  8// When the parameter is a function
  9<input rw-focus={focus}/>

provide-inject

• provide
  • describe: Provides a value that can be injected by descendant components
  • use

    1function App(){
    2  provide('name', 'provide value')
    3  return <>
    4    <Test />
    5  </>
    6}

• inject
  • describe: Inject a value provided by the superior
  • use

    1function Test(){
    2  const value = inject('name', 'defaultValue');
    3  return <h1>Test</h1>
    4}

life cycle

• onMount
  • describe: Execute after mounting
  • use

    1function App(){
    2  onMount(() => {
    3    console.log('Mount App');
    4  })
    5  return <h1>App</h1>
    6}

• onCleanup
  • describe: Execute after uninstalling
  • use

    1function App() {
    2  onCleanup(() => {
    3    console.log('Cleanup App');
    4  })      
    5  return <h1>App</h1>
    6}

Render

• render
  • describe: Render to page
  • use

    1/** [ If the second parameter is not filled in, a div with id="app" will be automatically created. ] */
    2render(<h1>Rw Indirect</h1>)

Not finished describing