JSFiddle - React, Tailwind, and code Playground

by Bruce Anderson

HTML

<div>
  <link rel=preconnect id=baseSampleJsonFolder href="https://cdn.jsdelivr.net/">
  <template id=personTemplate>
    <li><div>Name: |.name|</div><div>Email: |.email|</div></li>
  </template>
  <xtal-fetch disabled=2 base-link-id=baseSampleJsonFolder 
  fetch href="npm/xtal-fetch/demo/generated.json" as=json></xtal-fetch>
  <p-d on=fetch-complete to=[-view-model] m=1></p-d>
  <p-d on=fetch-complete to=[-in-entities] m=1></p-d>
  <trans-render -view-model><script nomodule>({
      ul: ({ctx, target}) => ctx.repeat(personTemplate, ctx, ctx.viewModel.length, target, {
        li: ({idx}) => ({
          div: ({ctx, target}) => ctx.interpolate(target, 'textContent', ctx.viewModel[idx])
        })
      })         
    })</script></trans-render>        
  <div>
    <ul></ul>
  </div>

  <template id="fileTemplate">
    <li>Message |.message|</li>
  </template>
  <xtal-fetch disabled base-link-id="baseSampleJsonFolder" fetch href="npm/xtal-fetch/demo/detail_:_id.json" for-each="_id" -in-entities  as="json"   set-path="detail_contents"></xtal-fetch>
  <p-d on=fetch-complete to=[-view-model] m=1></p-d>
  <trans-render -view-model><script nomodule>({
      ul: ({ctx, target}) => ctx.repeat(fileTemplate, ctx, ctx.viewModel.length, target, {
        li: ({ctx, idx, target}) => ctx.interpolate(target, 'textContent', ctx.viewModel[idx].detail_contents)
      })          
    })</script></trans-render>
  <div>
    <ul></ul>
  </div>
  <script type="module" src="https://unpkg.com/p-et-alia@0.0.74/p-d.js?module"></script>
  <script type="module" src="https://unpkg.com/xtal-fetch@0.0.76/xtal-fetch-entities.js?module"></script>
  <script type="module" src="https://unpkg.com/trans-render@0.0.143/trans-render.js?module"></script>
</div>