Hyperspan Templates

Pure JavaScript Streaming Templates used in Hyperspan

      // Template syntax
      // Values can be any scalar value, Promise, nested template, or object with a 'render' method
      function getContent() {
        const content = html`

          
Some static content here first
          
${sleep(600, (resolve) => resolve("Resolves second"))}
          
A bit more static content here as well
          

            ${Promise.resolve(
              html`Resolves first... (Nested:
              ${sleep(800, (resolve) => resolve(html`Resolves third`))})`
            )}
          
          

          ${new AsyncValue()}
        
`;
      
        const layout = html`

          
Layout Header
          
${content}
          
        
`;
      
        return layout;
      }
    

  // Template syntax
  // Values can be any scalar value, Promise, nested template, or object with a 'render' method
  function getContent() {
    const content = html`

      
Some static content here first
      
${sleep(600, (resolve) => resolve("Resolves second"))}
      
A bit more static content here as well
      

        ${Promise.resolve(
          html`Resolves first... (Nested:
          ${sleep(800, (resolve) => resolve(html`Resolves third`))})`
        )}
      
      

      ${new AsyncValue()}
    
`;
  
    const layout = html`

      
Layout Header
      
${content}
      
    
`;
  
    return layout;
  }
    

  // Template syntax
  // Values can be any scalar value, Promise, nested template, or object with a 'render' method
  function getContent() {
    const content = html`<div>
      <p>Some static content here first</p>
      <p>${sleep(600, (resolve) => resolve("Resolves second"))}</p>
      <p>A bit more static content here as well</p>
      <p>
        ${Promise.resolve(
          html`Resolves first... (Nested: ${sleep(800, (resolve) => resolve(html`Resolves third`))})`
        )}
      </p>
      <hr />
      ${new CustomObjectWithRenderMethod()}
    </div>`;
  
    return content;
  }