0.4.6 • Published 4 months ago

@stackpress/ink v0.4.6

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
4 months ago

Install

$ npm -i @stackpress/ink

Compiler Usage

//on server:
import ink from '@stackpress/ink/compiler';
//make a ink compiler
const compiler = ink();
//render HTML
const results = compiler.render('./page.ink');
//show HTML
console.log(results);

Ink Markup

Basic Markup

<!-- page.html -->
<script>
  const name = 'world';
</script>
<h1>Hello {name}!</h1>

Markup with Styles

<!-- page.html -->
<style>
  :host {
    color: purple;
  }
  :host h1 {
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>
<script>
  const name = 'world';
</script>
<h1>Hello {name}!</h1>

Markup with Props

<!-- page.html -->
<script>
  import { props } from '@stackpress/ink';
  const { name } = props();
</script>
<h1>Hello {name}</h1>

Markup with Reactivity

<!-- page.html -->
<script>
  import { signal } from '@stackpress/ink';
  const name = signal('world');
  const add = () => name.value += '!';
</script>
<h1 click=add>Hello {name.value}</h1>

Markup with Imports

<!-- page.html -->
<link rel="import" type="component" href="./my-heading.ink" />
<script>
  const name = 'world';
</script>
<my-heading {name}>Hello</my-heading>
<!-- my-heading.html -->
<script>
  import { props, children } from '@stackpress/ink';
  const { name } = props();

</script>
<h1>{children()} {name}</h1>

Markup with Conditional

<!-- page.html -->
<script>
  const name = 'world';
  const show = name === "world";
</script>
<if true={show}>
  <h1>Hello {name}</h1>
</if>

Markup with Loops

<!-- page.html -->
<script>
  const list = [ 'a', 'b', 'c' ];
</script>
<ul>
  <each key=i value=item from=list>
    <li>{i}: {item}</li>
  </each>
</ul>

Document Markup

<!-- page.html -->
<link rel="import" type="template" href="./templates/html-head.ink" />
<link rel="import" type="component" href="./components/to-do.ink" />
<style>
  body { 
    background-color: #DA532C; 
    color: #EFEFEF; 
  }
</style>
<html>
  <html-head />
  <body>
    <h1>{title}</h1>
    <to-do list=list start=start />
  </body>
</html>

Why Ink?

Current frontend solutions for the most part, come in the form of a "frontend framework" and are "all encompassing", requiring more import into the frontend framework and give little export out to support server first solutions. Ink is a modern HTML markup language and a server first template engine with a built-in parser/compiler that generates web components and support reactivity.

Ink works with most server frameworks including:

0.3.31

4 months ago

0.3.30

4 months ago

0.3.36

4 months ago

0.3.34

4 months ago

0.3.33

4 months ago

0.3.32

4 months ago

0.3.29

4 months ago

0.3.28

5 months ago

0.3.27

5 months ago

0.3.26

5 months ago

0.3.25

5 months ago

0.3.24

5 months ago

0.3.23

5 months ago

0.2.10

7 months ago

0.3.21

5 months ago

0.3.6

7 months ago

0.3.17

6 months ago

0.3.16

6 months ago

0.3.15

6 months ago

0.3.14

6 months ago

0.3.12

6 months ago

0.3.11

7 months ago

0.3.10

7 months ago

0.1.20

8 months ago

0.1.21

8 months ago

0.1.22

8 months ago

0.1.23

8 months ago

0.1.25

8 months ago

0.1.26

8 months ago

0.4.5

4 months ago

0.2.7

7 months ago

0.4.4

4 months ago

0.2.6

7 months ago

0.4.6

4 months ago

0.4.1

4 months ago

0.4.3

4 months ago

0.2.5

7 months ago

0.4.2

4 months ago

0.1.19

8 months ago

0.1.18

8 months ago

0.1.14

8 months ago

0.1.15

8 months ago

0.1.16

8 months ago

0.1.17

8 months ago

0.1.12

8 months ago

0.1.11

9 months ago

0.1.10

9 months ago

0.1.9

9 months ago

0.1.8

9 months ago