Giter Club home page Giter Club logo

docs's People

Contributors

aaaaash avatar ahkunta avatar bk1012 avatar bytemain avatar dqhl76 avatar ensorrow avatar erha19 avatar gustavorps avatar hacke2 avatar hnhhzy avatar iamxukai avatar john-deng avatar leavesster avatar life2015 avatar lukrisum avatar mengxiangyue avatar migrer avatar perfectpan avatar ricbet avatar situ2001 avatar songhn233 avatar tyn1998 avatar wlucius avatar yantze avatar yinyinfurong8888 avatar zhang19960108 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

docs's Issues

仓库名改为 docs

这样的命名更为标准,GitHub 支持改名了的仓库自动重定向到新仓库。可以减少一部分没有发现的问题

OpenSumi 文档内容讨论

http://opensumi.com/

集成文档

概览

快速开始

  • 快速开始(Web)
  • 快速开始(Electron)
  • 快速开始(Lite)

常见集成功能

  • 集成配置
  • 自定义菜单
  • 自定义视图
  • 自定义命令
  • 自定义快捷键 @erha19
  • 自定义日志落盘 @jinboker
  • 自定义埋点上报 @hacke2

开发文档

概览

基础设计

  • 核心概念
  • 开发规范(避坑) @erha19
  • 应用生命周期
  • 插件机制
  • 依赖注入
  • 贡献点
  • 前后端通信
  • 事件机制 @MMhunter
  • WebView @MMhunter

经典案例

  • 概览
  • 创建模块
  • 展示一个列表
  • 通过 DI 注册服务 (新增 DI override)
  • 使用贡献点
  • 实现前后端通信
  • 将 IDE 设置为只读模式 @Ricbet
  • 接入 Remote Opener @life2015
  • 空编辑器定制 @yantze
  • 纯前端案例(对接 Github) @AhkunTa
  • 协作分享 @jinboker

最佳实践

社区

核心模块介绍 @erha19

  • 概览
  • 基础工具函数
  • 编辑器能力
  • 布局能力
  • 浮层能力
  • 配置能力

博客

FAQ

Safari 上首页报错白屏

image

ua:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Safari/605.1.15
safari 版本:15.0 (16612.1.29.41.4, 16612)

撰写 Java 语言服务配套插件的使用文档

          当前主流后端开发,还是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 中存在一部分定制困难、文档缺失问题,造成新手用户在使用 OpenSumi 过程中出现功能开发无从下手的问题,在上一阶段我们统一对社区答疑往 Disscussion 进行引导,沉淀了部分 Q&A,及 OpenSumi 模块拓展案例仓库:opensumi/opensumi-module-samples,为了让文档更加友好专业,我们决定分阶段将这部分内容以文档形式沉淀至文档站中,帮助更多开发者解决开发过程中遇到的问题。

同时,我们也欢迎社区的开发者提交针对文档的需求或直接编写文档 ~

一期计划内容

新增 “自定义视图板块” 文档 #83

内容包括:

1. 视图追加类型

  • 如何添加侧边栏/底部面板?
  • 如何实现编辑器视图组件?

2. 局部样式修改

  • 认识 IDE 主题
  • 如何自定义主题色?
  • 覆盖某个布局区块的渲染模板(实现垂直布局)
  • 覆盖布局下的渲染组件(将默认的上下平铺模式改成横向的 Flex 模式)
  • 通过自定义模块渲染替换 Menubar 区域
  • 修改编辑器图标
  • 修改侧边栏图标
  • 追加侧边栏用户图标
  • 新增/修改欢迎页面
  • 自定义侧边栏 Welcome 页面
  • 新增 Toolbar 区域及自定义
  • 修改编辑器默认界面

3. 内置资源介绍

  • 内置图标集合
  • 内置组件
    • 基础 TreeView 组件使用
    • Button 使用
    • Select 使用
    • ...

新增 “模块拓展实战” 板块

opensumi/opensumi-module-samples 中沉淀的经典案例进一步进行代码解读及原理解析,内容包括:

  • 实现前后端通信
  • 实现内置终端环境信息
  • 使用内置组件
  • 使用 AntD 组件(如何自己适配组件库)
  • 实现欢迎页面展示
  • 创建编辑器快捷按钮
  • 使用输出面板
  • 注册菜单
  • 自定义 i18n 文案
  • 使用内置服务切换面板状态
  • 自定义文件打开方式(特定后缀文件使用自定义编辑器组件打开)
  • 浮层 API 的使用(Modal)
  • 新增 Toolbar 面板菜单及按钮

新增 “常见问题” 板块

承接 Disscussion 内容,利用文档站更强的文档搜索能力,实现对内容的快速检索。

原则:简单问题使用总结性内容,复杂问题可以使用单独的文档内容展示。

案例优化

1. 优化 WebIDE 部署方案

参考 coder/code-server 提供一个简单的部署命令及权限校验界面,形式也可以参考 WordPress 等建站工具,提供一个部署界面。
image

相关 Issue:

2. 优化 IDE-Electron 项目每日构建流程

当前 ide-electron 项目产物相对比较简陋,可以考虑起一个新的产物名称,同时,针对每个 OpenSumi 大版本进行打包,用于后续为用户提供快速体验能力。

image

3. 纯前端版本冗余代码优化

当前纯前端 ide-startup-lite 项目存在较多的冗余实现,包括但不限于:

  1. 对无用服务的覆盖实现(框架代码结构导致)
  2. 存在部分无效资源
  3. 部分插件资源来源不清晰,没有完全开源并清晰说明来源
  4. 部分实现滞后,存在冗余实现(代码索引方案,可以采用 anycode 方案)

同时,针对三个示例项目,应该面向开发者成为一个起步模板项目,当前的命名方式也存在不统一,存在理解上的问题,建议命名为类似 electron/web/web-lite 的命名结构,同时以起步项目的标准设计及精简代码。

待补充

欢迎下面留言留下你最希望有的文档内容 ~

[BUG] 按照文档示例修改无法移除 Terminal menu 终端菜单项

按照文档示例修改无法移除 Terminal menu 终端菜单项

image

复现路径(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)

  • OS: Debian Docker
  • Browser: chrome
  • OpenSumi Version: [v2.26.4]

如何自定义 OpenSumi 视图内容?

目前框架内存在较多的视图拓展能力,其中包括:

1. 视图追加类型

1.1 添加侧边栏/底部面板

image
代码实现:

registerComponent(registry: ComponentRegistry) {
	registry.register('@opensumi/ide-explorer', [], {
    iconClass: getIcon('explorer'),
    title: localize('explorer.title'),
    priority: 10,
    containerId: EXPLORER_CONTAINER_ID,
  });
}

1.2 增加自定义视图

image
相关代码:
[自定义布局后注册模块]:

@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']
  },
},

2. 修改部分区域样式

2.1 覆盖某个布局区块的渲染模板

如修改右侧组件渲染模板,从侧边栏渲染修改为按钮
image

// 通过 SlotRendererContribution 替换顶部的 SlotRenderer,将默认的上下平铺模式改成横向的 flex 模式:
@Domain(SlotRendererContribution)
export class TestToolbarSlotContribution implements SlotRendererContribution {
  registerRenderer(registry: SlotRendererRegistry) {
    registry.registerSlotRenderer(SlotLocation.top, TopSlotRenderer);
  }
}

2.2 通过替换渲染模板实现垂直布局

image

@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);
  }
}

2.3 通过自定义模块渲染替换 Menubar 区域

image

相关代码:

registerComponent(registry: ComponentRegistry) {
  registry.register(
    '@o2/menubar',
    {
      id: 'o2-custom-menubar',
      component: O2CodeOnlineTopView,
    },
    {
      containerId: 'o2-code-online',
      size: 27,
    },
  );
}

2.4 修改编辑器图标

image

相关代码:

@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'],
    },
  },
}

2.5 侧边栏图标

image

通过手动注册,修改侧边栏图标,代码如下:

  registerComponent(registry: ComponentRegistry) {
    registry.register('@opensumi/ide-explorer', [], {
      iconClass: getIcon('Gitlab-fill'),
      title: 'Gitlab',
      priority: 10,
      containerId: EXPLORER_CONTAINER_ID,
    });
  }

2.6 追加侧边栏用户图标

image

代码实现:opensumi/core#1741

2.7 新增/修改欢迎页面

image

相关代码:
https://github.com/opensumi/opensumi-module-samples/tree/main/modules/use-antd

2.8 自定义空面板 Welcome 页面

image

相关代码:

@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,
    });
  }
}

2.9 Toolbar 区域拓展及自定义

image

2.10 修改编辑器底部默认渲染组件

image
相关代码:

@Domain(ComponentContribution)
export class EditorEmptyComponentContribution implements ComponentContribution {
  registerComponent(registry: ComponentRegistry) {
    registry.register('editor-empty', {
      id: 'editor-empty',
      component: EditorEmptyComponent,
      initialProps: {},
    });
  }
}

3. 插件定制

3.1 侧边栏视图拓展

image

3.2 颜色/图标主题

image

3.3 修改主题图标(待实现)

可以通过 webfont 工具将本地的 svg 图标集合转化为 WOFF 字体后实现图标的替换(映射)
image

3.4 Toolbar 区域拓展

4. 其他资源

4.1 内置图标集

OpenSumi 内置图标:https://opensumi.github.io/core/iconfont.html

4.2 内置组件

OpenSumi Components:https://github.com/opensumi/core/tree/main/packages/components

[BUG] 经典案例中“通过快捷键添加项”缺失必要代码

跟着经典案例在一步步复现学习中,发现教程在一些地方有些小问题,比如在“通过DI注册并使用服务”中的“通过快捷键添加项”这一小节存在代码缺失,会导致初学者无法复现“效果展示”中的结果。

链接:https://opensumi.com/zh/docs/develop/sample/use-service-by-di#%E9%80%9A%E8%BF%87%E5%BF%AB%E6%8D%B7%E9%94%AE%E6%B7%BB%E5%8A%A0%E9%A1%B9

缺失一

image

缺失二

教程中没有提到todo.view.tsx也需要做相应的改动才能更新视图。

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.