OSCHINA-MIRROR/wscats-omi-snippets

Eno and Omi Snippets

Try 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.

下载地址 & Download： https://marketplace.visualstudio.com/items?itemName=Wscats.eni

项目地址 & Source Code ： https://github.com/Wscats/omi-snippets

Detailed Documentation

详细文档 & Document： https://github.com/Wscats/omi-docs

Contributors

_{Eno Yao}	_{Aaron Xie}	_{DK Lan}	_Yong	_{Li Ting}	_Xin	_Lemon	_Jing	_Lin	_{Tian Fly}

Quick Start

Install Omi Snippets.
Try it with omil, a Omi.js components loader based on webpack.
Via Marketplace Control: search for Omi Snippets and click install.
Manual: clone this repo and install omi-snippets.vsix into your Visual Studio Code.

In addition, if you want to build and install the extension from source, you need to install vsce, like this.

# Then, clone the repository

#### *Примечание: в ответе сохранены оригинальные форматирование и спецсимволы.* **and compile it.**

git clone https://github.com/Wscats/omi-snippets
cd omi-snippets
yarn
vsce package

**Это создаст базовый проект webpack + omil для вас, с файлами *.*omi или .eno и горячей перезагрузкой прямо из коробки!

Например, вы можете создать test.omi в Visual Studio Code перед установкой Omi Snippets.

<!-- 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>

После сохранения кода в редакторе (Ctrl+S) он будет преобразован в test.js.

// test.js
import { 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);

Использование в Omi

Файл *.*omi — это пользовательский формат файла, который использует синтаксис, похожий на HTML, для описания компонента Omi. Каждый файл *.*omi состоит из трёх типов языковых блоков верхнего уровня: <template>, <script>, и <style>, а также дополнительных пользовательских блоков:

<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>

Single-File Components Demo

Он также поддерживает JSX, если вы хотите это сделать, вам нужно написать <template> без атрибута lang="html" в вашем компоненте следующим образом:

<template>
  <header onClick={this.test}>{this.data.title}</header>
</template>

JSX Demo

omil поддерживает использование нестандартных языков, таких как препроцессоры CSS и языки шаблонов, компилируемые в HTML, путём указания атрибута lang для языкового блока. Например, после установки node-sass вы можете использовать Sass для стиля вашего компонента следующим образом:

<style lang="scss">
$height: 50px;
$color: #07c160;
header {
  height: $height;
  background-color: $color;
}
</style>

Sass Demo

Поддержка React

npm install styled-components --save

Вы также можете использовать класс ES6 для определения компонентного класса с помощью 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>

React Demo

Высший компонент (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC не являются частью API React. Вот конкретный пример.

<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 **Сотрудничество с TypeScript**

Статическая система типов может помочь предотвратить многие потенциальные ошибки во время выполнения, особенно по мере роста приложений. Вы можете использовать Single File Components (SFC) в сочетании с Higher Order Components (HOC), чтобы получить поддержку TypeScript.

**Пример кода на HTML**
```html
<template name="Eno">
    <div><p>{this.state.name}</p></div>
</template>
<script>
    // Поддержка TypeScript
    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>

Теперь вы можете создать EnoType.tsx в редакторе, который обеспечивает вывод типов TypeScript внутри SFC и множество других замечательных функций.

Код на TypeScript

// EnoType.ts
import 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 /> }
    }
}

React Demo

Typescript Demo

Omil предоставляет множество интересных возможностей:

Позволяет использовать другие загрузчики webpack для каждой части компонента Omi, например Sass для <style lang="scss"> и JSX/HTML для <template lang="html">, а также ES5+ для <script type="text/babel">.
Позволяет создавать пользовательские блоки в файле .omi или .eno, к которым можно применять собственные цепочки загрузчиков Здесь онлайн-демонстрация.
Обрабатывает статические ресурсы, указанные в <style> и <template>, как зависимости модулей и обрабатывает их загрузчиками webpack (например, htm, to-string-loader).
Имитирует ограниченный CSS для каждого компонента (использует Shadow DOM).
Поддерживает сохранение состояния при горячей перезагрузке во время разработки.

В двух словах, сочетание webpack и omil даёт вам современный, гибкий и чрезвычайно мощный рабочий процесс для создания приложений Omi.js.

trigger	snippet
!omi/t-omi	`<template><script><style>`
!react/t-react	`<template><script><style>`
import	`import { * } from 'omi'`
export default	`export default {}`
modult.export"	`modult.export = {}`
render	`render(){}`
css	`css(){}`
template	`<template></template>`
templateLang	`<template lang></template>`
script	`<script></script>`
style	`<style></style>`
styleLang	`<style lang></style>`
scaffold/t	`<template><script><style>`

Для получения правильного выделения синтаксиса для препроцессоров (например, JSX, SASS, TypeScript) необходимо установить соответствующие пакеты.

Чтобы включить выделение JSX, установите пакет Babel javascript highlighting package, который поддерживает JSX, в качестве подсветки по умолчанию для файлов .js. Возможно, вам потребуется явно отключить стандартный пакет JavaScript Sublime, чтобы он заработал.