npm install sfcjsSFCJS
Light JIT frontend view driver javascript library.
SFC is short for single file component.
What's the difference?
- JIT: render components in runtime, without ahead compiling
- AOT: compile SFC to pure javascript file
- SFC: write a component with .htm file, deploy to CDN directly, no pack or compiling
- Web Components: based on customElements, rendering in shadowDOM, supports isolated styles/css, supports slot for component
- Reactive Programming: modify javascript variables to rerender UI
- Simple Syntax: following HTML syntax, define
Step 2: place the customElement at some where link to your SFC file
`html`
Later you will see the component be rendered at the place where put.
Step 3: write your SFC and upload to the previous URL, here is an SFC example
`html
name: {{name}}
(class)="'age-' + age"
(style)="age > 13 ? 'font-weight: bold;' : null"
(if)="age > 10"
>age: {{age}}
{{index}}: {{color}}
:some-attr="age * 5 > 10 ? 'ok' : null"
>
`
Notice: you should must write tail semicolon at the end of a sentence.
Notice: only one root HTML tag supported, you can use
as the root tag to contain mutiple elements.x-sfc
In sfcjs, you will use
to bootstrap a remote SFC quickly.`html
`It supports the following attributes:
- src: the SFC file path, relative or absolute path both supported
- passive: disable immediately rendering, you should must invoke
to setup rendering
- pending-slot: is to treat slot as pendding content before the SFC file loaded
- attributes start with : or data- will be used as props to pass into SFC
- attributes not start with : or data- are not related, which is just for current custom elementYou can use
addEventListener to listen the events which are emitted inside SFC. The parameter is a CustomEvent, you can read event.detail to get the emitted value.`html
Loading...
`Template Syntax
-
is to generate string by given variables
- @ started attributes are events bindings, i.e. @click="handle(event)"
- started attributes are props passing, which pass real value, only work for sub components
- (..) started attributes are directivedirectives
- (if):
- (class):
- (style):
- (src)、(href): . src and href will make the relative path to right absolute path. Notice, the values are string, not expression.
- (repeat): {{item.text}}
. index is optional
- (key): always works with repeat, to identify a node in a list
- (bind): two way binding, only works for Responsive Styles
In
`
First Pattern:
var('{{ expression }}')
margin-right: var("{{ age + 'px' }}")
Second Pattern:
([age])
font-size: ([age])rem
In this pattern, only a variable can be put (not expression).
import
When you add
protool prefix before an imported path, the css file will be built into bundle. For example:`html
`Link
html
`Set
and as="x-some" for a to load the component as a customElement. You can set delay attribute on link tag to load the component later after document loaded.Template
SFCJS 支持在应用（而非组件）当前 html 中用 template 提前定义组件。例如：
`html
{{a}}
`Set
and as="x-some" for a to define a component and write component code inside the template tag.API
global variable
`html
`register
Register a component with given code (when you do not need to load code from remote).
html
{{a}}
);
`ts
declare function register(
/* component src /
src: string,
/* component code /
code: string,
options?: {
/* customElement name /
tag?: string,
},
)
`privilege
Define a customElement.
js
SFCJS.privilege(
't-button',
{
props: {
type: 'type',
theme: 'theme',
},
},
,
);
`html
Submit
`ts
declare function privilege(
tag: string,
options?: {
src?: string,
/* props mapping, i.e { s: 'some' } -> -> props.some /
props?: { [key: string]: string },
/* events mapping /
events?: { [key: string]: string },
onInit?,
onConnect?,
onMount?,
onDestroy?,
onChange?,
},
code?: string,
)
`Notice: src or code should must be passed.
js
SFCJS.privilege(
't-button',
{
src: './button.htm',
},
);
`Subcomponent
Import subcomponent by sfc: protool:
html
`props
html
{{props.content}}
`html
`Subcomponent only receive props, attrs are not able to receive. In the previous code,
are not passed into subcomponent.events
`js
import emit from 'sfc:emit';function handleClick() {
emit('triggered', 111)
}
`html
`others
- resolve(uri: string)
- query(selector: string): query a DOM node
- computed(getter: () => any): create a computed variable
- update(): update UI manually
- watch(vars, callback: (next, prev) => void)
AOT
js
const { bundle } = require('sfcjs/bunlder')
const code = bundle(file, options)
`ts
declare function bundle(
file: string,
options: {
/* the visit url of this component after deploy, default /{filename} /
entryUrl: string,
/* the root path of absolute path when we call sfc:/some.htm /
absRootPath: string,
/* the output file place, default to absRootPath /
outputDir: string,
/* whether build import 'sfcjs'; inside bundle /
importLib?: boolean,
/* alias component relative src to absolute path, for exmaple: ./some.htm -> /some/path/to/some.htm /
alias: { [key: string]: string },
},
)
`webpack loader:
js
const { bundle } = require('sfcjs/bunlder')
module.exports = function(content) {
const file = this.resourcePath;
const options = this.getOptions();
const code = bundle(file, options);
// Notice, code is ESModule, so this loader should be put after babel-loader
return code;
};
`vscode
- JSON Script Tag supports