javascript - 如何在 Google Colab 中使用 Svelte

Question

我在 TensorFlow 的 Lucid 中看到一些使用 Svelte 的很酷的 Colab UI 。

如何在 Colab 中轻松设置和使用 Svelte？

Answer 1

这是一个Gist设置类似于 Lucid 的 %%html_define_svelte 但更短一些。

但是如果你想使用最新的 Svelte 3.0 和 Rollup。这是another gist .

关键部分如下。首先是安装。

from IPython.core.magic import register_cell_magic
!npm install -g rollup
!npm install --save-dev svelte rollup-plugin-svelte rollup-plugin-node-resolve &>/dev/null

然后是配置和样板文件。

%%file rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'iife'
  },
  plugins: [svelte(), resolve()]
}

%%file main.js
import App from './App.html'
new App({ target: document.body })

然后是可用于定义和显示组件的核心 %%html。

# overide %%html to get syntax highlight
@register_cell_magic
def html(line, cell):
  from IPython.display import Javascript
  if line:  # component
    with open(line.strip(), 'w') as f:
      f.write(cell)
  else:     # main
    with open('App.html', 'w') as f:
      f.write(autoimport(cell))
    !rollup -c &>/dev/null
    return Javascript('bundle.js')

def autoimport(cell):
  if '<script>' in cell:
    return cell  # manual import
  import re
  tags = re.findall('<([A-Z]\w*)', cell)
  imports = map("import {0} from './{0}.html'\n".format, set(tags))
  script = "<script>"+"".join(imports)+"</script>\n"
  return script+cell

以下是定义组件的方法

%%html Nested.html
<h3>Paragraph</h3>

并快速调用它。我为 Capitalize 标签添加了自动导入，但您也可以在 <script> 标签内手动导入。

# main App.html to display
%%html
<h1>Header</h1>
<Nested/>