open-index/open-npm huggingface dataset:
npm package: @ossph/temple-client
Description: Browser library that Temple scripts can use to manage data in different ways.
Author: Chris
Latest version: 0.0.12

# ⛩️ Temple Client

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

Browser library that Temple scripts can use to manage data in different ways.

## Install

```bash
$ npm -i @ossph/temple-client
```

## Usage

```js
import { props, signal } from '@ossph/temple-client'
```

## Props

```html
<!-- page.html -->
<script>
  import { props } from '@ossph/temple';
  type PageProps = { name: string };
	const { name } = props<PageProps>();
</script>
<h1>Hello {name}</h1>
```

## Signal

```html
<!-- page.html -->
<script>
  import { signal } from '@ossph/temple';
	const name = signal<string>('world');
  name.value += '!';
</script>
<h1>Hello {name.value}</h1>
```
npm package: @ossph/temple-compiler
Description: Compiles Temple markup language files to JavaScript and HTML.
Author: Chris
Latest version: 0.0.12

# ⛩️ Temple Compiler

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

Compiles Temple markup language files to JavaScript and HTML.

## Install

```bash
$ npm -i @ossph/temple-compiler
```

## Basic Usage

```js
import { TempleCompiler } from '@ossph/temple-compiler';

const compiler = new TempleCompiler('/page.html', {...options...});

console.log(compiler.sourceCode);
```

### Compiler Options

| Name        | Description                            |
|-------------|----------------------------------------|
| fs          | File system where temple files located |
| cwd         | The current working directory          |
| brand       | The web component prefix               |
| buildFolder | Where to put cached files              |
| tsconfig    | Location of your tsconfig.json file    |
npm package: @ossph/temple-dev
Description: Temple developer mode with hot page reload
Author: Chris
Latest version: 0.1.7

# ⛩️ Temple DEV

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

Temple developer mode with hot page reload. 
Not suited for production environments.

## Install

```bash
$ npm -i @ossph/temple-dev
```

# Usage

```js
import http from 'http';
import temple from '@ossph/temple/compiler';
import { dev } from '@ossph/temple-dev';

//create temple compiler
const compiler = temple({ cwd: __dirname });
//1. create dev tools
const { router, refresh } = dev({ cwd: __dirname });

//create http server
const server = http.createServer(async (req, res) => {
  //2. Add dev router
  if (router(req, res)) return;
  //if home page
  if (req.url === '/') {
    //3. sync builder with refresh server
    refresh.sync(compiler.fromSource('./page.dtml'));
    //compile the document
    const html = await compiler.render('./page.dtml');
    //... send response ...
  }
  //... other routes ...
});
//listen on port 3000
server.listen(3000);
```
npm package: @ossph/temple-esbuild
Description: ESBuild support for the Temple markup language.
Author: Chris
Latest version: 0.1.7

# ⛩️ Temple ESBuild

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

ESBuild support for the Temple markup language.

## Install

```bash
$ npm -i @ossph/temple-esbuild
```

## Usage

```js
import esbuild from 'esbuild';
import { esComponentPlugin } from 'temple-esbuild';

esbuild.build({
  entryPoints: [ './app.tml' ],
  plugins: [ esComponentPlugin() ]
});
```
npm package: @ossph/temple-express
Description: Temple plugin for Express and native HTTP.
Author: Chris
Latest version: 0.1.7

# ⛩️ Temple Express

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

Temple plugin for Express and native HTTP.

## Install

```bash
$ npm -i @ossph/temple-express
```

## Usage

```js
import path from 'path';
import express from 'express';
import { view } from '@ossph/temple-express';

//create temple compiler
const compiler = temple({ cwd: __dirname, minify: false });
//create express app
const app = express();

//let's use express' template engine feature
app.engine('dtml', view(compiler));
//set the view engine to temple
app.set('views', path.join(__dirname, 'templates'));
app.set('view engine', 'dtml');
//..other routes
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});
```
npm package: @ossph/temple-loader
Description: Webpack support for the Temple markup language.
Author: Chris
Latest version: 0.1.7

# ⛩️ Temple Loader

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

Webpack support for the Temple markup language.

## Install

```bash
$ npm -i @ossph/temple-loader
```

## Usage

```js
// webpack.config.js
module.exports = {
  entry: './src/app.tml',
  output: { filename: 'app.js' },
  module: {
    rules: [
      {
        test: /\.tml$/,
        use: '@ossph/temple-loader',
        exclude: /node_modules/,
      }
    ],
  },
  resolve: { extensions: ['.tml'] }
};
```
npm package: @ossph/temple-parser
Description: Parses the Temple markup language to an abstract syntac tree (AST).
Author: Chris
Latest version: 0.0.12

# ⛩️ Temple Parser

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

Parses the Temple markup language to an abstract syntac tree (AST). 
This is used by the [@ossph/temple-compiler](https://github.com/OSSPhilippines/temple/tree/main/packages/temple-compiler) to convert the Temple markup language to 
JavaScript and HTML.

## Install

```bash
$ npm -i @ossph/temple-parser
```

## Basic Usage

```js
import { TempleParser } from '@ossph/temple-parser';

const ast = TempleParser.parse('<h1>Hello World</h1>');
```
npm package: @ossph/temple-server
Description: Server library that Temple server uses to manage data in different ways.
Author: Chris
Latest version: 0.0.12

# ⛩️ Temple Client

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

Browser library that Temple scripts can use to manage data in different ways.

## Install

```bash
$ npm -i @ossph/temple-client
```

## Usage

```js
import { props, signal } from '@ossph/temple-client'
```

## Props

```html
<!-- page.html -->
<script>
  import { props } from '@ossph/temple';
  type PageProps = { name: string };
	const { name } = props<PageProps>();
</script>
<h1>Hello {name}</h1>
```

## Signal

```html
<!-- page.html -->
<script>
  import { signal } from '@ossph/temple';
	const name = signal<string>('world');
  name.value += '!';
</script>
<h1>Hello {name.value}</h1>
```
npm package: @ossph/temple-tailwind
Description: Webpack support for the Temple markup language.
Author: Chris
Latest version: 0.1.7

# ⛩️ Temple Tailwind

This package is designed for [Temple](https://github.com/OSSPhilippines/temple),
the reactive web component template engine. See [docs](https://github.com/OSSPhilippines/temple)
for more information.

TailwindCSS support for the Temple markup language.

## Install

```bash
$ npm -i @ossph/temple-tailwind
```

## Usage

```js
import temple from '@ossph/temple/compiler';
import { tailwind } from '@ossph/temple-tailwind';

//create temple compiler
const compiler = temple({ cwd: __dirname });
//and use tailwind...
compiler.use(tailwind({
  darkMode: 'class',
  theme: { extend: {} },
  plugins: [],
  content: []
}));
```