Skip to content
On this page

Web compiler

Alins provides a compiler for the browser environment for development and debugging, and it is not recommended to use it directly in a production environment because it is compiled directly in the browser environment.

1. use

Save the following code in an HTML file to compile and run the Alins application directly in the browser environment:

Result
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>
    <script src='https://unpkg.com/alins-compiler-web'></script>
    <script type='text/alins'> 
        let count = 1;
        <button onclick={count++} $mount='body'>
            count is {count}
        </button>;
    </script>
</body>
</html>

2. The type attribute

The web compiler can recognize three types, 'text/alins', 'text/babel', 'text/jsx', and compile and execute the code in them.

3. import property

You can use the import attribute to specify how alins is introduced. Optional values are:

  1. esm: Indicates the introduction of alins using the import statement
  2. cjs: Indicates the introduction of Alins using the require method
  3. iife means from window.Alins introduced alins, which defaults to iife

The usage method is as follows

html
<script type='text/alins' import="esm"> 
    let count = 1;
    <button onclick={count++} $mount='body'>
        count is {count}
    </button>;
</script>

4. ts attribute

The ts attribute is used whether to use TypeScript

The following ways to enable it

html
<script type='text/alins' ts> 
    let count: number = 1;
    <button onclick={count++} $mount='body'>
        count is {count}
    </button>;
</script>

Alins 2022-present