javascript - 如何在Google Colab中使用Svelte

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

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

最佳答案

这是一个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标签添加了自动导入，但是您也可以在标签内手动导入。

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

关于javascript - 如何在Google Colab中使用Svelte，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59168497/