alins-compiler-web
v0.0.36
Published
All-in-js Web UI Framework, No jsx/template/vdom/css/html
Downloads
84
Maintainers
theajackReadme
🚀 Alins: The most pure and elegant WebUI framework
中文 | Documentation | Playground | Update Log | Feedback Errors/Defects | Gitee | Message Board
Alins Web Compiler
Alins provides a browser environment compiler that can be used for development and debugging. Since it is compiled directly in the browser environment, it is not recommended to be used directly in the production environment.
1. Use
Save the following code in an html file to compile and run the alins application directly in the browser environment:
<!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++} $$body>
count is {count}
</button>;
</script>
</body>
</html>2. 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 attribute
You can use the import attribute to top the import statement. The optional values are:
- esm: means using the import statement to introduce alins
- cjs: means using the require method to introduce alins
- iife means importing alins from window.Alins, the default value is iife
How to use it
<script type='text/alins' import="esm">
let count = 1;
<button onclick={count++} $$body>
count is {count}
</button>;
</script>4. ts attribute
The ts attribute is used to determine whether to use typescript
The opening method is as follows
<script type='text/alins' ts>
let count: number = 1;
<button onclick={count++} $$body>
count is {count}
</button>;
</script>