0.4.6 • Published 6 months ago

@stackpress/ink v0.4.6

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
6 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

6 months ago

0.3.30

6 months ago

0.3.36

6 months ago

0.3.34

6 months ago

0.3.33

6 months ago

0.3.32

6 months ago

0.3.29

7 months ago

0.3.28

7 months ago

0.3.27

7 months ago

0.3.26

7 months ago

0.3.25

7 months ago

0.3.24

7 months ago

0.3.23

7 months ago

0.2.10

9 months ago

0.3.21

8 months ago

0.3.6

9 months ago

0.3.17

8 months ago

0.3.16

8 months ago

0.3.15

8 months ago

0.3.14

8 months ago

0.3.12

8 months ago

0.3.11

9 months ago

0.3.10

9 months ago

0.1.20

10 months ago

0.1.21

10 months ago

0.1.22

10 months ago

0.1.23

10 months ago

0.1.25

10 months ago

0.1.26

10 months ago

0.4.5

6 months ago

0.2.7

9 months ago

0.4.4

6 months ago

0.2.6

9 months ago

0.4.6

6 months ago

0.4.1

6 months ago

0.4.3

6 months ago

0.2.5

9 months ago

0.4.2

6 months ago

0.1.19

10 months ago

0.1.18

10 months ago

0.1.14

10 months ago

0.1.15

10 months ago

0.1.16

10 months ago

0.1.17

10 months ago

0.1.12

11 months ago

0.1.11

11 months ago

0.1.10

11 months ago

0.1.9

11 months ago

0.1.8

11 months ago