Skip to main content
Module

x/tag/examples/todo-list/index.html

A tiny functionally declarative reactive web programming kernel
tylerchilds/tag
Go to Latest
File
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
<!doctype html><html lang="en">	<head>		<meta charset="utf-8">		<title>Tag • TodoMVC</title>		<link rel="stylesheet" href="vendor/todomvc-app.css">		<link rel="stylesheet" href="vendor/todomvc-common-base.css">	</head>	<body>    <noscript>JavaScript is required to manage your todo list</noscript>    <solid-user></solid-user>    <section class="todoapp">      <todo-list></todo-list>    </section>		<footer class="info">			<p>Double-click to edit a todo</p>			<p>Written by <a href="https://tychi.me">~tychi</a></p>			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>		</footer>    <script type="module">      // tag is a tiny library for binding HTML fragments to JavaScript closures      import tag from '../../mod.js'      import $user, { web } from '../../src/tags/solid-user.js'
      import initialTodoList from './data/initialTodoList.js'      import flags from './data/flags.js'
      import showListItems from './features/showListItems.js'      import showNewItemForm from './features/showNewItemForm.js'      import showFilters from './features/showFilters.js'      import showIncompleteCount from './features/showIncompleteCount.js'      import showClearCompletedAction from './features/showClearCompletedAction.js'      import showCompletenessToggle from './features/showCompletenessToggle.js'
      import performItemsRequest from './features/performItemsRequest.js'      const interactives = [        './features/onClearCompletedAction.js',        './features/onFilterChange.js',
        './features/onNewItemInput.js',        './features/onItemEdit.js',        './features/onItemChange.js',        './features/onItemToggle.js',        './features/onItemDelete.js',
        './features/onCompletenessToggle.js'      ];
      // create a new tag: <todo-list>      // define the initial state and shape of the data      const $ = tag('todo-list', initialTodoList)

      new Promise((resolve) => {        (function check(has) {          if(has().user) {            resolve(has().user)           }          requestAnimationFrame(() => check(has))        })($user.read)      }).then(async (user) => {        const { itemsContainerUrl } = $.read();
        if(!itemsContainerUrl) {          const url = await web.createContainer(            `${user.storageUrl}items/`          );
          $.write({ itemsContainerUrl: url });        }
        const items = await performItemsRequest($);        $.write({ items, loading: false });      })
      // html is a render function; if a string is returned, it is rendered      // whenever state changes, the render function will be called on each target      $.render((target) => {        const { loading } = $.read();        const { user, loading: userLoading } = $user.read()
        if(loading || userLoading) {          return `Loading...`        }
        if(!user) {          return `Please log in`        }
        return `          <header class="header">            <h1>todos</h1>            ${showNewItemForm($)}          </header>          <section class="main">            ${showCompletenessToggle($)}            <ul class="todo-list">              ${showListItems($, flags)}            </ul>            <footer class="footer">              ${showIncompleteCount($)}              <ul class="filters">                ${showFilters($, flags)}              </ul>              ${showClearCompletedAction($)}            </footer>          </section>        `      })
      interactives.forEach(async (url) => {        const { default: start } = await import(url)          start($, flags)      })    </script>	</body></html>