Oris

Oris is a DOM-native reactive frontend framework.

It does not use a virtual DOM. Templates are parsed into real DOM nodes, and reactive effects bind directly to text nodes, attributes, form fields, and list fragments.

Create a Project

Use this path when a new Oris app is needed with a standalone oris command.

Install the CLI globally:

npm i -g @rexllins/oris

Create a project:

oris create my-app
cd my-app
npm run dev

Install the Framework

Use this path when Oris is being added to an existing project.

Install Oris into an existing project:

npm i @rexllins/oris

Import it:

import Oris from '@rexllins/oris';

const App = Oris.defineComponent({
  state: () => ({ count: 0 }),
  computed: {
    doubled() { return this.state.count * 2; }
  },
  methods: {
    inc() { this.state.count++; }
  },
  template: `
    <button @click="inc">Count: {{ count }}</button>
    <p>Double: {{ doubled }}</p>
  `
});

Oris.createApp({ root: '#app' }).mount(App);

Browser Usage

Use the ESM build for native module loading in the browser:

<div id="app"></div>
<script type="module">
  import Oris from 'https://cdn.jsdelivr.net/npm/@rexllins/oris@latest/dist/oris.js';

  Oris.createApp({ root: '#app' }).mount({
    state: () => ({ message: 'Hello Oris' }),
    template: '<h1>{{ message }}</h1>'
  });
</script>

Use the global build for plain script-tag usage without imports:

<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/@rexllins/oris@latest/dist/oris.global.js"></script>
<script>
  Oris.createApp({ root: '#app' }).mount({
    state: () => ({ message: 'Hello Oris' }),
    template: '<h1>{{ message }}</h1>'
  });
</script>