@viewdo/x-ui

view.DO <x-ui/>

Usage no npm install needed!

<script type="module">
  import viewdoXUi from 'https://cdn.skypack.dev/@viewdo/x-ui';
</script>

README

Experience Elements

Pre-Release

MIT size Dependabot tree-shaking ts

NPM CoveragStatus Gitter jsdelivr unpkgd

These elements encapsulate application functionality using HTML-like elements. This approach keeps the semantics of a web application declarative and 'semi-mono-linguistic'.

The goal of this project is to empower the next generation of personalized, interactive web-experiences with less friction and less semantic-diversion.

Application Functionality, Expressed in HTML

Declarative applications are more deterministic and easier to understand for more levels of expertise. These components are segmented into option sub-systems to only require what you need:

Actions: <x-action-*>

  • Declared Reactive Actions
  • Async Functions

Routing: <x-app-view*>

  • URL/Hash-based Routing (within a single page!)
  • Fast, SPA-like navigation between pages
  • Guided navigation, wizards & workflows

Navigation: <x-app-view-do>

  • Guided Navigation
  • Media-Timed Actions
  • Interactive Video
  • Reactive Audio

Data: <x-data>

  • Expression Evaluation & Binding
  • Data-Template Rendering
  • Data-driven Rule Evaluation for Navigation

Content: <x-content>

  • Dynamic Content Rendering
  • Deferred Content
  • Markdown Rendering
  • Remote HTML

UI: <x-ui>

  • Interface Management
  • Theme Management
  • UI Component Integrations

Elements: <x-elements>

  • HTML Manipulation w/ Declared Actions
  • "JQuery as an Async Tag"

Installation

Add a single script-reference tag into your HTML page's head so the browser can figure out how to interpret our elements -- and that's it.

This is a pre-release project and is subject to breaking-changes and incomplete features. Thank you for trying it out!

CDN

<head>
  ...
  <script
    type="module"
    src="https://unpkg.com/@viewdo/x-ui/dist/x-ui/x-ui.esm.js"
  ></script>
  ....
</head>

NPM

npm i @viewdo/x-ui

<head>
  ...
  <script
    type="module"
    src="~/node_modules/@viewdo/x-ui/dist/x-ui/x-ui.esm.js"
  ></script>
  ....
</head>

Learn More

The best way to see what these elements can do for your HTML is to take a look at the documentation/demo. The site is built using these elements as a single HTML file with partials pulled in, as-needed.

Take a Tour

Contact

If you like the idea, join us! Or give it a star.

github

If you have requests, ideas or feedback, join the discussion on Gitter:

Gitter

Reach out to me personally:

Twitter

Contributions

Built on the shoulders of giants!

Thank you to the Ionic team and their fabulous Stencil.js SDK for the best way to build lightening fast, native elements.

Also, thank you to the creators and contributors to all open-source efforts, but especially to the libraries we love and use in our plugin components:

Data <x-data>

  • SilentMatt: expression evaluator for a declarative expression parser
  • JSONata: JSONata another declarative approach for solving problems, this uses expressions to query JSON.

Audio <x-audio>

  • howler.js: howler-js best audio library for managing audio files

Markdown <x-content-markdown>

  • remarkable: remarkable Ridiculously fast markdown to HTML processing.