Newx NPM | npm.io

About

Reuse code as modules or components in static web pages and building readable codes.

Built with

Also refer to Poi.

Getting Started

Before we get started, ensure that you have installed Yarn (or npm) on your machine.

$ yarn add -D newx

Then create the files:

src/layout/base.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <block name="body"></block>
  </div>
</body>
</html>

src/components/info.html

<div class="info">
  <span>Newx.js</span>
</div>

src/pages/index.html

<extends src="../layouts/base.html">
  <block name="body">
    <import from="info.html"></import>
    <p>Welcome~~</p>
  </block>
</extends>

And just run the command to start a development server:

$ newx dev
√ Wrote index.html
✨ The development server runs on http://localhost:8080.

Visit the site and you will get:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="info">
      <span>Newx.js</span>
    </div>
    <p>Welcome~~</p>
  </div>
</body>
</html>

Newx can also make static pages load vue components on demand.