在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:omi-snippets开源软件地址:https://gitee.com/wscats/omi-snippets开源软件介绍:Eno and Omi SnippetsTry it Now! Visual Studio Code syntax highlighting for single-file Omi.js components (enabled by omil). Or Download Vsix! to install in Visual Studio Code
Detailed Documentation
Contributors
Quick Start
# Then, clone the repository and compile it.git clone https://github.com/Wscats/omi-snippetscd omi-snippetsyarnvsce package This will setup a basic For example, you can create <!-- test.omi --><template name="component-name"> <div>{this.data.name}</div></template><script>import style from './style.css';export default class { static css = style install(){ this.data = { name: 'Eno Yao', } }}</script><style lang="scss"> div{ color:red; }</style> After you save the code in editor // test.jsimport { WeElement, define, h } from "omi";import style from "./style.css";const componentName = class extends WeElement { render() { return h("div", null, this.data.name); } static css = `div{color:red;}` + style; install() { this.data = { name: "Eno Yao" }; }};define("component-name", componentName); Usage In OmiA <template lang="html" name="component-name"> <!-- replace render function --> <header onClick="${this.test}">${this.data.title}</header></template><script>import style from './_oHeader.css'export default class { static css = style + `p{color:red}` // it will combine scoped css,only support static css = xxx test(){ console.log('Hello Eno!') } install() { this.data = { title: 'Omi' } }}</script><style>/* scoped css */header { height: 50px; background-color: #07c160; color: white; text-align: center; line-height: 50px; width: 100%;}</style> It also supports JSX, if you want to do that, you only write <template> <header onClick={this.test}>{this.data.title}</header></template>
<style lang="scss">$height: 50px;$color: #07c160;header { height: $height; background-color: $color;}</style> Support Reactnpm install styled-components --save You can also use an ES6 class to define a class component by omil. <template name="ComponentName"> <p>{this.state.title}</p></template><script> export default class { constructor(props) { super(props) this.state.title = "Eno Yao" } }</script><style lang="scss"> p {color: #58bc58;}</style> A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. Here's a concrete example. <template name="ComponentName"> <div><p>{this.state.title}</p></div></template><script> const HOC = (props) => { return (WraooedComponent) => { return class HOC extends WeElement { state = { name: 'Eno Yao', ...props } render() { return ( <div>Hello World<WraooedComponent name={{ ...this.state }} /></div> ) } } } } export default HOC({ age: 18 })(class { constructor(props) { super(props) this.state = { title: 'Lemon' } } componentDidMount() { console.log(this) } handleChange() {} })</script><style lang="scss"> p { color: #58bc58; }</style> Cooperate With TypeScriptA static type system can help prevent many potential runtime errors, especially as applications grow. You can use <template name="Eno"> <div><p>{this.state.name}</p></div></template><script> // TypeScript Support import EnoType from './EnoType.tsx' export default EnoType(class { constructor(props) { super(props); this.state = { name: 'abc', age: 18} } })</script><style lang="scss"> p { color: #58bc58; }</style> Now, you can create // EnoType.tsimport React from 'react';interface EnoTypeProps { }interface EnoTypeState { name: string }export default (Component: React.ComponentType) => { return class EnoType extends React.Component<EnoTypeProps, EnoTypeState> { constructor(props: EnoTypeProps) { super(props) this.state = { name: 'Eno Yao' } } render() { return <Component /> } }} There are many cool features provided by
In a nutshell, the combination of webpack and Code Snippets
NOTE: You still need to install corresponding packages for pre-processors (e.g. Enabling JSX HighlightingThe
ThanksLicenseOmi Snippets is released under theMIT |
请发表评论