Question

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

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

Answer 1

这里的设置Gist与Lucid的%% html_define_svelte类似，但是要短一些。

但是，如果您想在汇总中使用最新的Svelte 3.0。这是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标签添加了自动导入功能，但是您也可以在

如何在Google Colab中使用Svelte

1 个答案: