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:
- esm: Indicates the introduction of alins using the import statement
- cjs: Indicates the introduction of Alins using the require method
- 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>