atomicojs / atomico

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
https://atomicojs.dev
MIT License
1.18k stars 43 forks source link

Cannot read property 'render' of undefined while using use-lazy @0.13.4 #17

Closed ranglang closed 4 years ago

ranglang commented 4 years ago

it cause error

function useRender() {
    return HOOK_CURRENT.ref.render; //  render undefined 
}
``

import { useLazy } from "atomico/use-lazy"; let Products = useLazy(() => import("./pages/product"));

"atomico": "^0.13.4"
UpperCod commented 4 years ago

Hi, now useLazy is a hook, this greatly improve the development experience when making dynamic import or request

Dynamic Import Example

import { useLazy } from "atomico/use-lazy";

function WebComponent() {
  let AsyncNode = useLazy(() => import("./pages/product"));

  return (
    <host shadowDom>
      <AsyncNode loading="loading..." error="error...!" />
    </host>
  );
}

Request example

import { useLazy } from "atomico/use-lazy";

function WebComponent() {
  let AsyncNode = useLazy(async () => {
    // import or use a virtual-dom fragment locally
    let { default: Products } = await import("./pages/product");
    // initialize the call to your api
    let request = await fetch("products");
    // Return a component or virtual nodes to show the component
    return (await request.json()).map(dataProduct => (
      <Products {...dataProduct} />
    ));
  });

  return (
    <host shadowDom>
      <AsyncNode loading="loading...!" error="error...!" />
    </host>
  );
}

Codepen example Hook documentation

thanks for your issue let me share this new functionality

ranglang commented 4 years ago

i just forgot to add the loading view. thank you, the atomicojs is really easy for web components