dego-package

Dego

Dego is a JavaScript framework built for speed and efficiency. Dego gives developers the ability to make complex apps by writing HTML directly in the JavaScript. Providing an ECMA compliant syntax to create functional components (unlike JSX).

Documentation

Notice: Dego is currently in alpha. It is not production ready and should not be used in a production application

Dego's documentation is currently under construction

In the meantime, here is a simple guide to get started:

1. To setup the default Dego project run npx dego-package create. This will create a default Dego project in the current working directory. Follow the setup instructions generated by the command.
2. Build a project using Dego and it's syntax (documentation will include explanations and guides on how to work with Dego).
3. Run npx dego-package build and npx dego-package serve to host a fast and modern website.

Examples

The src/root.ts file:

import Layout from './layout'
import { render } from 'dego-package'

await render('root', Layout)

The src/layout.ts file:

import { DegoComponentInvocation, html } from 'dego-package'

export default function Layout({ page }: { page: DegoComponentInvocation }) {
  return html`
    <div>
      <header>Dego Example</header>
      <div>${page}</div>
    </div>
  `
}

The src/pages/index.ts file:

import { DegoComponentInvocation, html } from 'dego-package'

export default function Index() {
  const [isBoxOpen, setIsBoxOpen] = useValue(false)

  return html`
    <div>
    
      <h1>This is the homepage!</h1>
      Open this box:
      <button onclick=${() => setIsBoxOpen(true)}>Open Box</button>

      ${isBoxOpen &&
      e(() => html`
        <div>
          This is a box!
          <button onclick=${() => setIsBoxOpen(false)}>Close Box</button>
        </div>
      `)}

    </div>
  `
}

Contribution

Dego's contribution guide is under construction

In the meantime, feel free to submit a pull request on Github.