### Serve Production Build
Source: https://github.com/baidu/san/blob/master/example/todos-esnext/README.md
After building, use this command to start a static server for the 'dist' folder. It ensures the production build is accessible. Install 'serve' globally if not already present.
```bash
type serve >/dev/null 2>&1 || npm i -g serve
$ serve dist -p 9999
```
--------------------------------
### Start Development Server
Source: https://github.com/baidu/san/blob/master/example/todos-ts/README.md
Execute this script to start the development server.
```bash
$ npm start
```
--------------------------------
### Serve the Example Locally
Source: https://github.com/baidu/san/blob/master/example/todos-amd/README.md
Use a simple HTTP server to open the example in your browser. Python's SimpleHTTPServer is a common choice.
```bash
$ python -m SimpleHTTPServer 8888
Serving HTTP on 0.0.0.0 port 8888 ...
```
--------------------------------
### Install Dependencies
Source: https://github.com/baidu/san/blob/master/example/todos-ts/README.md
Run this command to install project dependencies.
```bash
$ npm i
```
--------------------------------
### Install San.js via NPM
Source: https://github.com/baidu/san/blob/master/README.md
Use this command to install the San.js framework using npm.
```bash
$ npm i san
```
--------------------------------
### Run Development Server
Source: https://github.com/baidu/san/blob/master/example/todos-store/README.md
Execute this script to start the development server. Access the application at http://localhost:8888/.
```bash
$ npm run dev
```
--------------------------------
### San Spec Runner Setup
Source: https://github.com/baidu/san/blob/master/test/index.html
Initializes the San spec runner by ensuring the San module is loaded before the original window.onload handler.
```javascript
Object.prototype.attach = function () {};
(function () {
var boot = window.onload;
window.onload = function () {
require(['san'], boot);
};
})();
```
--------------------------------
### Accessor Expression Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Encodes an accessor path with a head of 6. The path is represented as an array of segments.
```javascript
aPack = [6,1,3,"name"]
```
--------------------------------
### San.js Quick Start Component
Source: https://github.com/baidu/san/blob/master/README.md
A basic San.js component demonstrating data binding and template rendering. Attach this component to the document body to see it in action.
```html
Quick Start
```
--------------------------------
### String Expression Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Encodes a string value with a head of 3. The value follows the head.
```javascript
aPack = [3,"Hello"]
```
--------------------------------
### Number Expression Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Encodes a numeric value with a head of 4. The numeric value follows the head.
```javascript
aPack = [4,10]
```
--------------------------------
### Call Expression Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Encodes a function call expression with a head of 8. It includes the function name and an array of arguments.
```javascript
aPack = [8,6,1,3,"showToast",1,6,1,3,"msg"]
```
--------------------------------
### Text Node Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents a text node with a head of 0. The subsequent elements encode the text content, potentially including expressions.
```javascript
aPack = [,9,,2,3,"Hello ",7,,6,1,3,"name",]
```
--------------------------------
### Interpolation Expression Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Encodes an interpolation expression with a head of 7. It includes the original flag, the expression, and any filters.
```javascript
aPack = [7,,6,1,3,"name",]
```
--------------------------------
### Text Expression Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Encodes a text expression with a head of 9. It includes a flag indicating if it's original text and an array of segments.
```javascript
aPack = [9,,2,3,"Hello ",7,,6,1,3,"name",]
```
--------------------------------
### Boolean Expression Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Encodes a boolean value with a head of 5. '1' represents true, and 'undefined' (omitted) represents false.
```javascript
aPack = [5,1]
```
--------------------------------
### Element Node Compression Example
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents an element node with a head of 1. It includes the tag name, properties, and children. Directives like 'if' and 'for' are also encoded.
```javascript
aPack = [1,"dd",3,38,6,1,3,"list",37,"item",,,6,1,3,"list",,9,,1,7,,6,1,3,"item",,]
```
--------------------------------
### Get ANode Directive Info
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Retrieve specific directive information, such as the 'if' directive, from an ANode's directives object. This is applicable to non-text nodes.
```javascript
// 获取 if 指令信息。该信息是一个特定的指令信息对象
aNode.directives['if'];
```
--------------------------------
### Build the Project
Source: https://github.com/baidu/san/blob/master/example/todos-amd/README.md
Run this command to build the project before serving.
```bash
$ npm run build
```
--------------------------------
### Configure AMD Modules and Initialize App
Source: https://github.com/baidu/san/blob/master/example/todos-amd/index-perf.html
Sets up the base URL and module paths for RequireJS, then initializes the application. Ensure all specified modules are correctly located.
```javascript
require.config({
baseUrl: 'src',
paths: {
moment: '../node_modules/moment/moment',
jquery: '../node_modules/jquery/dist/jquery',
san: '../node_modules/san/dist/san',
'san-router': '../node_modules/san-router/index'
},
waitSeconds: 3
});
require( ['app-perf'], function (app) {
app.init();
} );
```
--------------------------------
### Configure RequireJS and Initialize App
Source: https://github.com/baidu/san/blob/master/example/todos-amd/index.html
Sets up the base URL and module paths for RequireJS, then initializes the application. Ensure the paths correctly point to your San.js and other dependencies.
```javascript
require.config({
baseUrl: 'src',
paths: {
moment: '../node_modules/moment/moment',
jquery: '../node_modules/jquery/dist/jquery',
san: '../node_modules/san/dist/san',
'san-router': '../node_modules/san-router/index'
},
waitSeconds: 3
});
require( ['app'], function (app) {
app.init();
} );
```
--------------------------------
### San Devtool Integration
Source: https://github.com/baidu/san/blob/master/test/index.html
Sets up a global object for San devtool communication, capturing emitted messages.
```javascript
var sanDevMsg;
var sanDevMsgReceived;
window.__san_devtool__ = {
emit: function (name, arg) {
sanDevMsg = { name: name, arg: arg };
sanDevMsgReceived = true;
}
};
```
--------------------------------
### Include San.js via CDN
Source: https://github.com/baidu/san/blob/master/README.md
Include the San.js library in your HTML file using a CDN link.
```html
```
--------------------------------
### Define and Attach San.js Component
Source: https://github.com/baidu/san/blob/master/example/start/hello/index.html
Defines a simple San.js component with a template and initial data, then attaches it to the document body. Ensure San.js is included before this script.
```javascript
var MyApp = san.defineComponent({
template: '
Hello {{name}}!
',
initData: function () {
return { name: 'San' };
}
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### San Core Module Loading
Source: https://github.com/baidu/san/blob/master/test/index.html
Configures RequireJS to load the San.js core module from the specified path.
```javascript
require.config({
paths: {
san: '../dist/san'
}
});
```
--------------------------------
### Define and Attach San.js Component
Source: https://github.com/baidu/san/blob/master/example/start/test/index.html
Defines a San.js component with a template for a list, initializes data, and attaches it to the document body. Use this for creating reusable UI components in San.js.
```javascript
var MyApp = san.defineComponent({
template:
`
{{ item.title }}
`,
toggle: function () {
var isHidden = this.data.get('isHidden');
this.data.set('isHidden', !isHidden);
},
initData: function () {
return {
value:1,
datasource: [
{color: 'blue', title: 'blue',id:1},
{color: 'yellow', title: 'yellow',id:2}
]
};
}
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### Define and Attach a San Component
Source: https://github.com/baidu/san/blob/master/example/start/style/index.html
Defines a San component with a button to toggle the visibility of text. Attach the component to the document body.
```javascript
var MyApp = san.defineComponent({
template: '
'
+ 'Hello!
',
toggle: function () {
this.data.set('isShow', !this.data.get('isShow'));
}
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### Render List with San.js
Source: https://github.com/baidu/san/blob/master/example/start/list/index.html
Use the `san-for` directive to iterate over an array and render list items. The data is set in the `attached` hook.
```javascript
var MyApp = san.defineComponent({
template: '
{{item}}
',
attached: function () {
this.data.set('list', ['san', 'er', 'esui', 'etpl', 'esl']);
}
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### Use Folder Component in MyApp
Source: https://github.com/baidu/san/blob/master/example/start/slot/index.html
Defines the main application component that uses the 'ui-folder' component and passes content into its slot. The component is then attached to the document body.
```javascript
var MyApp = san.defineComponent({
components: {
'ui-folder': Folder
},
template: '
write in outer component
'
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### Custom Opacity Transition in San.js
Source: https://github.com/baidu/san/blob/master/example/start/transition/index.html
Defines a custom transition object with 'enter' and 'leave' methods. Use this for custom animations not covered by built-in transitions. Ensure the 'done' callback is invoked to signal the end of the transition.
```javascript
var opacityTranser = {
enter: function (el, done) {
var steps = 20;
var currentStep = 0;
function goStep() {
if (currentStep >= steps) {
el.style.opacity = 1;
done();
return;
}
el.style.opacity = currentStep++ / steps;
requestAnimationFrame(goStep);
}
goStep();
},
leave: function (el, done) {
var steps = 20;
var currentStep = 0;
function goStep() {
if (currentStep >= steps) {
el.style.opacity = 0;
done();
return;
}
el.style.opacity = 1 - currentStep++ / steps;
requestAnimationFrame(goStep);
}
goStep();
}
};
```
--------------------------------
### San Devtool Emit Test
Source: https://github.com/baidu/san/blob/master/test/index.html
Verifies that the San devtool message received flag is set when an emit event occurs.
```javascript
expect(sanDevMsgReceived).toBeTruthy();
```
--------------------------------
### San.js Component with san-for Directive
Source: https://github.com/baidu/san/blob/master/example/start/for/index.html
Use san-for to render a list of persons, displaying their index, name, and email. The component also includes a 'dept' property.
```javascript
var MyApp = san.defineComponent({
template: '' +
'
' +
'
name - email
' +
'
{{index + 1}}. {{p.name}}({{dept}}) - {{p.email}}
' +
'
',
initData: function () {
return {
dept: 'ssg',
persons: [
{name: 'errorrik', email: 'errorrik@gmail.com'},
{name: 'otakustay', email: 'otakustay@gmail.com'}
]
};
}
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### Two-Way Binding with Input and Display
Source: https://github.com/baidu/san/blob/master/example/start/bindx/index.html
Use this pattern to create components where user input directly updates component data and is reflected in the template. Ensure the 'name' property is defined in your component's data.
```javascript
var MyApp = san.defineComponent({
template: '
Hello {{name}}!
'
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### Define a Reusable Folder Component with Slot
Source: https://github.com/baidu/san/blob/master/example/start/slot/index.html
Defines a 'Folder' component that includes a title and a slot for custom content. The component manages its own collapsed/expanded state.
```javascript
var Folder = san.defineComponent({
template: '' +
'
' +
'
{{title}}
' +
'
' +
'
',
toggle: function () {
this.data.set('fold', !this.data.get('fold'));
}
});
```
--------------------------------
### Event Binding in HTML
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Use the `on-click` attribute to bind events in HTML templates. The expression is a CALL expression.
```html
```
--------------------------------
### San Component with Custom Transition
Source: https://github.com/baidu/san/blob/master/example/start/transition/index.html
A San.js component that uses the custom `opacityTranser` for conditional element transitions. The `s-transition` directive applies the transition logic when elements are added or removed based on the 'num' data property.
```javascript
var MyApp = san.defineComponent({
template: '' +
'
'
+ ' '
+ ' big'
+ ' small'
+ '
',
opacityTranser: opacityTranser,
toggle: function () {
var num = this.data.get('num');
this.data.set('num', num > 10000 ? 1 : 30000);
}
});
var myApp = new MyApp({
data: {
num: 30000
}
});
myApp.attach(document.body);
```
--------------------------------
### San Checkbox Component
Source: https://github.com/baidu/san/blob/master/example/start/checkbox/index.html
Defines a San component with multiple checkboxes. The 'online' data property is bound to the checked state of the checkboxes and initialized with specific values.
```javascript
var MyApp = san.defineComponent({
template: '
' +
'' +
'' +
'' +
' {{online}}' +
'
',
initData: function () {
return { online: [] };
},
attached: function () {
this.data.set('online', ['errorrik', 'otakustay']);
}
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### Define and Attach San Component with SVG ForeignObject
Source: https://github.com/baidu/san/blob/master/example/start/foreignObject/index.html
Defines a San component that renders an SVG with a foreignObject element. The foreignObject allows embedding HTML content, such as a paragraph with word wrap, directly within the SVG. The component is then instantiated and attached to the document body.
```javascript
var MyApp = san.defineComponent({
template:
``,
initData: function () {
return { name: 'San' };
}
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### Iterate ANode Props
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Use this snippet to iterate over all bound properties of an ANode. This is applicable to non-text nodes.
```javascript
// 遍历所有绑定属性
aNode.props.forEach(function (prop) {
});
```
--------------------------------
### 普通属性 (Normal Property)
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents a normal property with a name and an expression. Use for standard key-value assignments.
```javascript
aPack = [2,"title",9,,2,3,"Hello ",7,,6,1,3,"name",]
/*
{
"name": "title",
"expr": {
"type": 7,
"segs": [
{
"type": 1,
"value": "Hello "
},
{
"type": 5,
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "name"
}
]
},
"filters": []
}
]
}
}
*/
```
--------------------------------
### HTML Loop Directive
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Use the `s-for` directive in HTML to iterate over a collection and render list items. It supports accessing both the item and its index.
```html
{{p.name}} - {{p.email}}
```
--------------------------------
### Conditional Directives in HTML
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Use `s-if` for conditional rendering and `s-else` for the alternative. Else and elif nodes are grouped under the parent if node's `elses` property.
```html
Hello!Offline
```
--------------------------------
### Iterate ANode Events
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Use this snippet to iterate over all bound event handlers of an ANode. This is applicable to non-text nodes.
```javascript
// 遍历所有绑定属性
aNode.events.forEach(function (event) {
});
```
--------------------------------
### Two-Way Binding for Input Elements
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Use this for two-way data binding on input elements. The binding information object includes an 'x' property set to true to indicate two-way binding.
```html
```
```javascript
aNode = {
"directives": {},
"props": [
{
"name": "type",
"expr": {
"type": "ExprType.STRING",
"value": "text"
}
},
{
"name": "value",
"expr": {
"type": "ExprType.ACCESSOR",
"paths": [
{
"type": "ExprType.STRING",
"value": "name"
}
]
},
"x": 1
}
],
"events": [],
"children": [],
"tagName": "input"
}
```
--------------------------------
### OBJECT Node Structure
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents an object literal. Use for creating objects with key-value pairs, including spread properties.
```javascript
aPack = [13,2,14,3,"key",6,1,3,"key",15,6,1,3,"ext"]
/*
{
"type": 11,
"items": [
{
"name": {
"type": 1,
"value": "key"
},
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "key"
}
]
}
},
{
"spread": true,
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "ext"
}
]
}
}
]
}
*/
```
--------------------------------
### San Radio Button Component
Source: https://github.com/baidu/san/blob/master/example/start/radio/index.html
Defines a San component with radio buttons. The 'checked' attribute is bound to the 'online' data property, and the selected value is displayed below the radio group. Use this for creating grouped radio selections.
```javascript
var MyApp = san.defineComponent({
template: '
' +
'' +
'' +
'' +
' {{online}}' +
'
',
initData: function () {
return { online: 'errorrik' };
}
});
var myApp = new MyApp();
myApp.attach(document.body);
```
--------------------------------
### NULL Node Structure
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents a null value. Use for explicitly setting a value to null.
```javascript
aPack = [19]
/*
{
"type": 13
}
*/
```
--------------------------------
### San Component ID Conflict Test
Source: https://github.com/baidu/san/blob/master/test/index.html
Tests that different San instances do not generate the same ID for elements within the same container.
```javascript
var MyComponent = san.defineComponent({
template: 'aaa'
});
var MyComponent2 = require('san').defineComponent({
template: 'aaa2'
});
var myComponent = new MyComponent();
var myComponent2 = new MyComponent2();
var wrap = document.createElement('div');
document.body.appendChild(wrap);
myComponent.attach(wrap);
myComponent2.attach(wrap);
var bs = wrap.getElementsByTagName('b');
expect(!bs[0].id || bs[0].id !== bs[1].id).toBeTruthy();
myComponent.dispose();
myComponent2.dispose();
document.body.removeChild(wrap);
```
--------------------------------
### OBJECT ITEM SPREAD
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents an object item with spread. Use for spreading properties from another object into the current object.
```javascript
aPack = [15,6,1,3,"ext"]
/*
{
"spread": true,
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "ext"
}
]
}
}
*/
```
--------------------------------
### BINARY Node Structure
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents a binary operation. Use for operations with two operands and an operator.
```javascript
aPack = [10,43,6,1,3,"num",4,1]
/*
{
"type": 8,
"operator": 43,
"segs": [
{
"type": 4,
"paths": [
{
"type": 1,
"value": "num"
}
]
},
{
"type": 2,
"value": 1
}
]
}
*/
```
--------------------------------
### Event Binding Abstract Node Structure
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Represents an event binding in the abstract node structure. The event name is 'click' and it calls the 'clicker' function with the '$event' argument.
```javascript
aNode = {
"directives": {},
"props": [
{
"name": "type",
"expr": {
"type": ExprType.STRING,
"value": "button"
}
}
],
"events": [
{
"name": "click",
"expr": {
"type": ExprType.CALL,
"name": {
type: ExprType.ACCESSOR,
paths: [
{type: ExprType.STRING, value: "clicker"}
]
},
"args": [
{
"type": ExprType.ACCESSOR,
"paths": [
{
"type": ExprType.STRING,
"value": "$event"
}
]
}
]
}
}
],
"children": [
{
"textExpr": {
"type": ExprType.TEXT,
"segs": [{"type": ExprType.STRING, "value": "click here"}]
}
}
],
"tagName": "button"
}
```
--------------------------------
### ARRAY ITEM SPREAD
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents an array item with spread. Use for spreading elements from another array into the current array.
```javascript
aPack = [18,6,1,3,"ext"]
/*
{
"spread": true,
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "ext"
}
]
}
}
*/
```
--------------------------------
### ARRAY Node Structure
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents an array literal. Use for creating arrays with elements, including spread elements.
```javascript
aPack = [16,3,17,4,1,17,6,1,3,"two",18,6,1,3,"ext"]
/*
{
"type": 12,
"items": [
{
"expr": {
"type": 2,
"value": 1
}
},
{
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "two"
}
]
}
},
{
"spread": true,
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "ext"
}
]
}
}
]
}
*/
```
--------------------------------
### NOVALUE 属性 (NoValue Property)
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents a property with a 'noValue' flag. Use when a property should be present but have no explicit value assigned, often for boolean flags.
```javascript
aPack = [33,"disabled",5,1]
/*
{
"name": "disabled",
"expr": {
"type": 3,
"value": true
},
"noValue": 1
}
*/
```
--------------------------------
### UNARY Node Structure
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents a unary operation. Use for operations with a single expression and an operator.
```javascript
aPack = [11,33,6,1,3,"exists"]
/*
{
"type": 9,
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "exists"
}
]
},
"operator": 33
}
*/
```
--------------------------------
### Bind Title Attribute with Text Interpolation
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Use this to bind an attribute to a TEXT type expression that includes string literals and interpolations. The expression is parsed into segments.
```html
{{name}}
```
```javascript
aNode = {
"directives": {},
"props": [
{
"name": "title",
"expr": {
"type": "ExprType.TEXT",
"segs": [
{
"type": "ExprType.STRING",
"value": "This is "
},
{
"type": "ExprType.INTERP",
"expr": {
"type": "ExprType.ACCESSOR",
"paths": [
{
"type": "ExprType.STRING",
"value": "name"
}
]
},
"filters": []
}
]
}
}
],
"events": [],
"children": [
{
"textExpr": {
"type": "ExprType.TEXT",
"segs": [
{
"type": "ExprType.INTERP",
"expr": {
"type": "ExprType.ACCESSOR",
"paths": [
{
"type": "ExprType.STRING",
"value": "name"
}
]
},
"filters": []
}
]
}
}
],
"tagName": "span"
}
```
--------------------------------
### Bind Title Attribute with Direct Accessor Expression
Source: https://github.com/baidu/san/blob/master/doc/anode.md
When an attribute is a single interpolation without filters, the expression can be directly represented as an ACCESSOR type.
```html
{{name}}
```
```javascript
aNode = {
"directives": {},
"props": [
{
"name": "title",
"expr": {
"type": "ExprType.ACCESSOR",
"paths": [
{
"type": "ExprType.STRING",
"value": "name"
}
]
}
}
],
"events": [],
"children": [
{
"textExpr": {
"type": "ExprType.TEXT",
"segs": [
{
"type": "ExprType.INTERP",
"expr": {
"type": "ExprType.ACCESSOR",
"paths": [
{
"type": "ExprType.STRING",
"value": "name"
}
]
},
"filters": []
}
]
}
}
],
"tagName": "span"
}
```
--------------------------------
### Conditional Directives Abstract Node Structure
Source: https://github.com/baidu/san/blob/master/doc/anode.md
Represents conditional rendering with `s-if` and `s-else`. The `s-if` directive's value is an expression, while `s-else` has a boolean value of true.
```javascript
aNode = {
"directives": {},
"props": [],
"events": [],
"children": [
{
"directives": {
"if": {
"value": {
"type": ExprType.ACCESSOR,
"paths": [
{type: ExprType.STRING, value: "isOnline"}
]
},
"name": "if"
}
},
"props": [],
"events": [],
"children": [
{
"textExpr": {
"type": ExprType.TEXT,
"segs": [
{"type": ExprType.STRING, "value": "Hello!"}
]
}
}
],
"tagName": "span",
"elses": [
{
"directives": {
"else": {
"value": true,
"name": "else"
}
},
"props": [],
"events": [],
"children": [
{
"textExpr": {
"type": ExprType.TEXT,
"segs": [
{"type": ExprType.STRING, "value": "Offline"}
]
}
}
],
"tagName": "span"
}
]
},
],
"tagName": "div"
}
```
--------------------------------
### Text Node with Interpolation
Source: https://github.com/baidu/san/blob/master/doc/anode.md
This ANode represents a text node within a paragraph, including an interpolation for a dynamic value. The `textExpr` property holds the expression information.
```javascript
aNode = {
"directives": {},
"props": [],
"events": [],
"children": [
{
"textExpr": {
"type": ExprType.TEXT,
"segs": [
{
"type": ExprType.STRING,
"value": "Hello "
},
{
"type": ExprType.INTERP,
"expr": {
"type": ExprType.ACCESSOR,
"paths": [
{
"type": ExprType.STRING,
"value": "name"
}
]
},
"filters": []
},
{
"type": ExprType.STRING,
"value": "!"
},
]
}
}
],
"tagName": "p"
}
```
--------------------------------
### TERTIARY Node Structure
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents a tertiary operation. Use for conditional expressions with condition, truthy, and falsy expressions.
```javascript
aPack = [12,6,1,3,"exists",6,1,3,"num",4,0]
/*
{
"type": 10,
"segs": [
{
"type": 4,
"paths": [
{
"type": 1,
"value": "exists"
}
]
},
{
"type": 4,
"paths": [
{
"type": 1,
"value": "num"
}
]
},
{
"type": 2,
"value": 0
}
]
}
*/
```
--------------------------------
### Parenthesized Expression Info
Source: https://github.com/baidu/san/blob/master/doc/anode.md
This object represents a parenthesized expression within a larger expression. The `parenthesized` property is set to true.
```javascript
// (a + b) * c
// a + b 的表达式对象上包含 parenthesized 属性，值为 true
exprInfo = {
type: ExprType.BINARY,
segs: [
{
type: ExprType.BINARY,
parenthesized: true,
segs: [
{
type: ExprType.ACCESSOR,
paths: [
{
type: ExprType.STRING,
value: 'a'
}
]
},
{
type: ExprType.ACCESSOR,
paths: [
{
type: ExprType.STRING,
value: 'b'
}
]
}
],
operator: 43
},
{
type: ExprType.ACCESSOR,
paths: [
{
type: ExprType.STRING,
value: 'c'
}
]
}
],
operator: 42
}
```
--------------------------------
### JavaScript Object Representation of Loop Directive
Source: https://github.com/baidu/san/blob/master/doc/anode.md
This JavaScript object defines the structure for a loop directive, specifying the item, index, and value variables, as well as the data source for iteration.
```javascript
aNode = {
"directives": [],
"props": [],
"events": [],
"children": [
{
"textExpr": {
"type": ExprType.TEXT,
"segs": [
{
"type": ExprType.STRING,
"value": "\n "
}
],
"value": "\n "
}
},
{
"directives": {
"for": {
"item": {
type: ExprType.ACCESSOR,
paths: [
{"type": ExprType.STRING, "value": "p"}
]
},
"index": {
type: ExprType.ACCESSOR,
paths: [
{"type": ExprType.STRING, "value": "index"}
]
}
"value": {
type: ExprType.ACCESSOR,
paths: [
{"type": ExprType.STRING, "value": "persons"}
]
},
"name": "for"
}
},
"props": [],
"events": [],
"children": [
{
"textExpr": {
"type": ExprType.TEXT,
"segs": [
{
"type": ExprType.INTERP,
"expr": {
"type": ExprType.ACCESSOR,
"paths": [
{"type": ExprType.STRING, "value": "p"},
{"type": ExprType.STRING, "value": "name"}
]
},
"filters": []
},
{
"type": ExprType.STRING,
"value": " - "
},
{
"type": ExprType.INTERP,
"expr": {
"type": ExprType.ACCESSOR,
"paths": [
{"type": ExprType.STRING, "value": "p"},
{"type": ExprType.STRING, "value": "email"}
]
},
"filters": []
}
]
}
}
],
"tagName": "li"
},
{
"textExpr": {
"type": ExprType.TEXT,
"segs": [
{
"type": ExprType.STRING,
"value": "\n"
}
],
"value": "\n"
}
}
],
"tagName": "ul"
}
```
--------------------------------
### OBJECT ITEM UNSPREAD
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents an object item without spread. Use for defining a key-value pair in an object.
```javascript
aPack = [14,3,"key",6,1,3,"key"]
/*
{
"name": {
"type": 1,
"value": "key"
},
"expr": {
"type": 4,
"paths": [
{
"type": 1,
"value": "key"
}
]
}
}
*/
```
--------------------------------
### ARRAY ITEM UNSPREAD
Source: https://github.com/baidu/san/blob/master/doc/anode-pack.md
Represents an array item without spread. Use for defining an element in an array.
```javascript
aPack = [17,4,1]
/*
{
"expr": {
"type": 2,
"value": 1
}
}
*/
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.