Javascript 如何在Google Colab中使用Svelte

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

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

这里有一个类似于Lucid的%%html\u define\u Svelte的设置，但略短一些

但是，如果您想使用最新的苗条3.0与汇总。给你

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

来自IPython.core.magic导入寄存器\u单元格\u magic
!npm安装-g汇总
!npm安装--保存开发工具svelte汇总插件svelte汇总插件节点解析&>/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

#跳过%%html以获得语法突出显示
@寄存器\单元\魔术
def html（行、单元格）：
从IPython.display导入Javascript
如果行：#组件
将open（line.strip（），'w'）作为f：
f、 写入（单元）
其他：#主要
以open（'App.html'，'w'）作为f：
f、 写入（自动导入（单元格））
!汇总-c&>/dev/null
返回Javascript（'bundle.js'）
def自动导入（单元格）：
如果单元格中有“”：
返回单元格#手动导入
进口稀土
tags=re.findall（'