opensumi / docs Goto Github PK
View Code? Open in Web Editor NEWOpenSumi document website
Home Page: https://opensumi.com
License: MIT License
OpenSumi document website
Home Page: https://opensumi.com
License: MIT License
node_modules/@opensumi/gatsby-theme/site/layouts/layout.tsx,Line 200 link拼成linl。
导致配置logo的link不生效。
Hi, guys. I am reading docs for developers and just find a link that is broken.
使用说明详细点,模块细化点
两部分内容:
We need docs for integrators to help them integrate with OpenSumi DevTools.
这样的命名更为标准,GitHub 支持改名了的仓库自动重定向到新仓库。可以减少一部分没有发现的问题
当前主流后端开发,还是java占据主流,sumi的一致性我觉得比vscode做得好,但是,要作为java开发主力的话,插件需要安装的太多了,而且sumi的插件体系明显和vscode的不一致,至少在java插件的丰富度上,比较制约啊,建议sumi能出一个含有java插件的套装。甚至可以基于这个套装作为java的专属ide开发分支,可以简单的参考下vscode的https://code.visualstudio.com/docs/languages/java,他里面给出了Coding Pack for Java,包含插件的套装,伴随着插件的更新,还是能满足简单的日常开发使用的
Originally posted by @wglnint in #85 (comment)
当前 OpenSumi 中存在一部分定制困难、文档缺失问题,造成新手用户在使用 OpenSumi 过程中出现功能开发无从下手的问题,在上一阶段我们统一对社区答疑往 Disscussion 进行引导,沉淀了部分 Q&A,及 OpenSumi 模块拓展案例仓库:opensumi/opensumi-module-samples,为了让文档更加友好专业,我们决定分阶段将这部分内容以文档形式沉淀至文档站中,帮助更多开发者解决开发过程中遇到的问题。
同时,我们也欢迎社区的开发者提交针对文档的需求或直接编写文档 ~
内容包括:
将 opensumi/opensumi-module-samples 中沉淀的经典案例进一步进行代码解读及原理解析,内容包括:
承接 Disscussion 内容,利用文档站更强的文档搜索能力,实现对内容的快速检索。
原则:简单问题使用总结性内容,复杂问题可以使用单独的文档内容展示。
参考 coder/code-server 提供一个简单的部署命令及权限校验界面,形式也可以参考 WordPress 等建站工具,提供一个部署界面。
相关 Issue:
当前 ide-electron
项目产物相对比较简陋,可以考虑起一个新的产物名称,同时,针对每个 OpenSumi 大版本进行打包,用于后续为用户提供快速体验能力。
当前纯前端 ide-startup-lite
项目存在较多的冗余实现,包括但不限于:
同时,针对三个示例项目,应该面向开发者成为一个起步模板项目,当前的命名方式也存在不统一,存在理解上的问题,建议命名为类似 electron/web/web-lite
的命名结构,同时以起步项目的标准设计及精简代码。
欢迎下面留言留下你最希望有的文档内容 ~
按照文档示例修改无法移除 Terminal menu 终端菜单项
复现路径(To Reproduce)
按照以下示例和代码修改无法移除 Terminal menu 终端菜单项
https://opensumi.com/en/docs/integrate/universal-integrate-case/custom-menu
import { BrowserModule } from '@opensumi/ide-core-browser';
import { Domain } from '@opensumi/ide-core-browser';
import { MenuContribution, IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
@Injectable()
@Domain(MenuContribution)
export class MenuBarContribution implements MenuContribution {
registerMenus(registry: IMenuRegistry): void {
registry.unregisterMenuId(MenuId.MenubarTerminalMenu);
console.log("registry.registerMenubarItem", MenuId.MenubarTerminalMenu);
}
}
预期表现(Expected behavior)
移除 Terminal menu 终端菜单项
环境信息(Environment)
复现路径(To Reproduce)
https://opensumi.com/zh/docs/integrate/quick-start/web
目前框架内存在较多的视图拓展能力,其中包括:
registerComponent(registry: ComponentRegistry) {
registry.register('@opensumi/ide-explorer', [], {
iconClass: getIcon('explorer'),
title: localize('explorer.title'),
priority: 10,
containerId: EXPLORER_CONTAINER_ID,
});
}
@Domain(ComponentContribution)
export class TestContribution implements ComponentContribution {
registerComponent(registry: ComponentRegistry) {
registry.register(
'test-toolbar',
[
{
id: 'test-toolbar',
component: TestToolbar,
name: '测试'
}
],
{
containerId: 'test-toolbar'
}
);
}
}
布局配置:
layoutConfig: {
...defaultConfig,
...{[SlotLocation.top]: {
modules: ['@opensumi/ide-menu-bar', 'test-toolbar'],
}},
'customAction': {
modules: ['test-toolbar']
},
},
// 通过 SlotRendererContribution 替换顶部的 SlotRenderer,将默认的上下平铺模式改成横向的 flex 模式:
@Domain(SlotRendererContribution)
export class TestToolbarSlotContribution implements SlotRendererContribution {
registerRenderer(registry: SlotRendererRegistry) {
registry.registerSlotRenderer(SlotLocation.top, TopSlotRenderer);
}
}
@Injectable()
export class TopTabModule extends BrowserModule {
providers: Provider[] = [
TopTabContribution,
];
component = TopTab;
}
@Domain(ComponentContribution, SlotRendererContribution)
export class TopTabContribution implements ComponentContribution, SlotRendererContribution {
registerComponent(registry: ComponentRegistry): void {
registry.register('@opensumi/ide-top-tab', {
id: 'top-tab',
component: TopTab,
}, {
size: 56,
});
}
registerRenderer(registry: SlotRendererRegistry) {
registry.registerSlotRenderer('left', LeftTabRenderer as any);
registry.registerSlotRenderer('center', CenterTabRenderer as any);
registry.registerSlotRenderer('right', RightTabRenderer as any);
}
}
相关代码:
registerComponent(registry: ComponentRegistry) {
registry.register(
'@o2/menubar',
{
id: 'o2-custom-menubar',
component: O2CodeOnlineTopView,
},
{
containerId: 'o2-code-online',
size: 27,
},
);
}
相关代码:
@Injectable()
@Domain(ComponentContribution)
export class MenuBarContribution implements ComponentContribution {
// Component key
static MenuBarContainer = '@opensumi/menu-bar-example';
registerComponent(registry: ComponentRegistry): void {
registry.register(MenuBarContribution.MenuBarContainer, {
component: MenuBarView,
id: MenuBarContribution.MenuBarContainer,
});
}
}
/**
* Custom menu bar component.
* Add a logo in here, and keep
* opensumi's original menubar.
*/
export const MenuBarView = () => (
<div
id={VIEW_CONTAINERS.MENUBAR}
className={styles.menu_bar_view}
style={{ height: LAYOUT_VIEW_SIZE.MENUBAR_HEIGHT }}
>
<span className={styles.menu_bar_logo} />
<MenuBar />
</div>
);
layoutConfig: {
...defaultConfig,
...{
[SlotLocation.top]: {
modules: ['@opensumi/menu-bar-example', 'toolbar'],
},
},
}
通过手动注册,修改侧边栏图标,代码如下:
registerComponent(registry: ComponentRegistry) {
registry.register('@opensumi/ide-explorer', [], {
iconClass: getIcon('Gitlab-fill'),
title: 'Gitlab',
priority: 10,
containerId: EXPLORER_CONTAINER_ID,
});
}
代码实现:opensumi/core#1741
相关代码:
https://github.com/opensumi/opensumi-module-samples/tree/main/modules/use-antd
相关代码:
@Domain(ClientAppContribution)
export class WelcomeContentSampleContribution implements ClientAppContribution {
@Autowired(IViewsRegistry)
private readonly viewsRegistry: IViewsRegistry
onDidStart() {
this.viewsRegistry.registerViewWelcomeContent(RESOURCE_VIEW_ID, {
content: `Add new Welcome Content\n[Open Folder 2.0](command:${FILE_COMMANDS.OPEN_FOLDER.id})`,
group: ViewContentGroups.Open,
order: 1,
});
}
}
@Domain(ComponentContribution)
export class EditorEmptyComponentContribution implements ComponentContribution {
registerComponent(registry: ComponentRegistry) {
registry.register('editor-empty', {
id: 'editor-empty',
component: EditorEmptyComponent,
initialProps: {},
});
}
}
可以通过 webfont 工具将本地的 svg 图标集合转化为 WOFF 字体后实现图标的替换(映射)
OpenSumi 内置图标:https://opensumi.github.io/core/iconfont.html
OpenSumi Components:https://github.com/opensumi/core/tree/main/packages/components
参考 react-component 那种
组件库必须要有文档,不然就相当于没有这个组件。
跟着经典案例在一步步复现学习中,发现教程在一些地方有些小问题,比如在“通过DI注册并使用服务”中的“通过快捷键添加项”这一小节存在代码缺失,会导致初学者无法复现“效果展示”中的结果。
教程中没有提到todo.view.tsx也需要做相应的改动才能更新视图。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.