From b365c892ee597cf278fa42e1e2bf616691bc0080 Mon Sep 17 00:00:00 2001 From: arshad Date: Tue, 11 Jun 2024 07:13:42 +0530 Subject: [PATCH] Export `Editor` as the default and rename it to `CopilotEditor` --- docs/components/editor-demo.tsx | 4 +-- docs/pages/docs/faq.mdx | 2 +- docs/pages/docs/guide/copilot-options.mdx | 10 +++---- docs/pages/docs/guide/copilot-setup.mdx | 6 ++-- docs/pages/docs/index.mdx | 14 ++++----- src/{editor.tsx => copilot-editor.tsx} | 6 ++-- src/helpers/prompt.ts | 4 +-- src/hooks/use-start-completion.ts | 2 +- src/index.ts | 29 +++++++++++++++---- src/types/completion.ts | 2 +- ...ditor-props.ts => copilot-editor-props.ts} | 2 +- test/src/app/page.tsx | 4 +-- 12 files changed, 51 insertions(+), 34 deletions(-) rename src/{editor.tsx => copilot-editor.tsx} (92%) rename src/types/{editor-props.ts => copilot-editor-props.ts} (97%) diff --git a/docs/components/editor-demo.tsx b/docs/components/editor-demo.tsx index 1d7c708c..f952974b 100644 --- a/docs/components/editor-demo.tsx +++ b/docs/components/editor-demo.tsx @@ -1,5 +1,5 @@ import {motion} from 'framer-motion'; -import {Editor, Theme} from 'monacopilot'; +import CopilotEditor, {Theme} from 'monacopilot'; import {useTheme} from 'next-themes'; const EDITOR_DEFAULTS = { @@ -27,7 +27,7 @@ const EditorDemo = () => { animate={{opacity: 1, y: 0}} transition={{duration: 0.4, delay: 0.6}} className="rounded-xl my-8 overflow-hidden bg-background border shadow-md shadow-neutral-50 dark:shadow-neutral-900 md:w-[700px] w-full h-[400px]"> - - Yes, you can easily switch from @monaco-editor/react to monacopilot. Just replace the import statement and you are good to go. + Yes, you can easily switch from @monaco-editor/react to monacopilot. Just replace the import statements and you are good to go. diff --git a/docs/pages/docs/guide/copilot-options.mdx b/docs/pages/docs/guide/copilot-options.mdx index 01442f83..4202371c 100644 --- a/docs/pages/docs/guide/copilot-options.mdx +++ b/docs/pages/docs/guide/copilot-options.mdx @@ -11,7 +11,7 @@ import { Callout } from 'nextra/components' Provide additional code, such as neighboring code snippets. This facilitates more accurate and workspace-specific completions by Copilot. The `externalContext` is structured as an array, allowing you to include content from multiple files. ```jsx - @@ -60,7 +60,7 @@ The name of the file you are editing. This is used to provide more relevant comp For example, if you are editing a file named `utils.js`, the completions will be more relevant to utility functions. ```jsx - @@ -68,10 +68,10 @@ For example, if you are editing a file named `utils.js`, the completions will be #### Completions for Specific Technologies -Currently, the completions are shown based on the language specified in the editor. To enable completions for specific technologies, pass the `technologies` prop to the `Editor` component. +Currently, the completions are shown based on the language specified in the editor. To enable completions for specific technologies, pass the `technologies` prop to the `CopilotEditor` component. ```jsx - diff --git a/docs/pages/docs/guide/copilot-setup.mdx b/docs/pages/docs/guide/copilot-setup.mdx index a4af3353..825718b6 100644 --- a/docs/pages/docs/guide/copilot-setup.mdx +++ b/docs/pages/docs/guide/copilot-setup.mdx @@ -76,14 +76,14 @@ export default async function handler(req: GatsbyFunctionRequest, res: GatsbyFun #### Integrating Copilot to the Editor -Utilize the `Editor` component with the AI auto-completion by setting the `endpoint` to the API handler: +Utilize the `CopilotEditor` component with the AI auto-completion by setting the `endpoint` to the API handler: ```jsx {6} -import { Editor } from "monacopilot"; +import CopilotEditor from "monacopilot"; function App() { return ( - diff --git a/docs/pages/docs/index.mdx b/docs/pages/docs/index.mdx index 04529a6b..deeef537 100644 --- a/docs/pages/docs/index.mdx +++ b/docs/pages/docs/index.mdx @@ -32,13 +32,13 @@ To get started with Monacopilot, you can install it first: -Just import the `Editor` component and use it in your code: +Just import the `CopilotEditor` and use it in your code: ```jsx -import { Editor } from "monacopilot"; +import CopilotEditor from "monacopilot"; function App() { - return ; + return ; } ``` @@ -46,14 +46,14 @@ The above code is a simple example of how to use Monacopilot in your React appli ### Themes -Monacopilot comes with a wide range of themes that you can use in your editor. To use a theme, you can just pass the `theme` prop to the `Editor` component: +Monacopilot comes with a wide range of themes that you can use in your editor. To use a theme, you can just pass the `theme` prop to the `CopilotEditor` component: ```jsx {8} -import { Editor } from "monacopilot"; +import CopilotEditor from "monacopilot"; function App() { return ( - { case 'completion': return 'completing the code'; default: - return 'unknown mode'; + return 'completing the code'; } }; diff --git a/src/hooks/use-start-completion.ts b/src/hooks/use-start-completion.ts index 6d5f200f..80dd75b0 100644 --- a/src/hooks/use-start-completion.ts +++ b/src/hooks/use-start-completion.ts @@ -14,7 +14,7 @@ import type { ExternalContext, Filename, Technologies, -} from '../types/editor-props'; +} from '../types/copilot-editor-props'; import useDebounceFn from './use-debounce-fn'; const localPredictionEngine = new LocalCodePredictionEngine(); diff --git a/src/index.ts b/src/index.ts index 2e2d6950..5b7a6231 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,14 +1,31 @@ import Copilot from './classes/copilot'; -import Editor from './editor'; +import CopilotEditor from './copilot-editor'; import type {CompletionRequest, CompletionResponse} from './types/completion'; -import type EditorProps from './types/editor-props'; -import type {Endpoint, Technologies, Theme} from './types/editor-props'; +import type CopilotEditorProps from './types/copilot-editor-props'; +import type {Endpoint, Technologies, Theme} from './types/copilot-editor-props'; -export * from '@monaco-editor/react'; +// Export everything from `@monaco-editor/react` except `Editor`, `EditorProps`, and `Theme` +// We have our own `Editor` as `CopilotEditor` and `EditorProps` as `CopilotEditorProps` +// We have our own `Theme` exported. +export type { + BeforeMount, + DiffBeforeMount, + DiffEditor, + DiffEditorProps, + DiffOnMount, + Monaco, + MonacoDiffEditor, + OnChange, + OnMount, + OnValidate, + useMonaco, + loader, +} from '@monaco-editor/react'; + +export {CopilotEditor as default}; export { - Editor, - EditorProps, + CopilotEditorProps, Theme, Endpoint, Technologies, diff --git a/src/types/completion.ts b/src/types/completion.ts index 913cb229..d6834109 100644 --- a/src/types/completion.ts +++ b/src/types/completion.ts @@ -13,7 +13,7 @@ import type { ExternalContext, Filename, Technologies, -} from './editor-props'; +} from './copilot-editor-props'; export type CompletionModel = 'llama'; diff --git a/src/types/editor-props.ts b/src/types/copilot-editor-props.ts similarity index 97% rename from src/types/editor-props.ts rename to src/types/copilot-editor-props.ts index 071d451c..1f75b297 100644 --- a/src/types/editor-props.ts +++ b/src/types/copilot-editor-props.ts @@ -43,7 +43,7 @@ export type ExternalContext = { content: string; }[]; -export default interface EditorProps extends MonacoEditorProps { +export default interface CopilotEditorProps extends MonacoEditorProps { /** * The name of the file you are editing. This is used to provide more relevant completions based on the file's purpose. * For example, if you are editing a file named `utils.js`, the completions will be more relevant to utility functions. diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx index 7af8fdf0..8ad384af 100644 --- a/test/src/app/page.tsx +++ b/test/src/app/page.tsx @@ -2,7 +2,7 @@ import {useState} from 'react'; -import {Editor} from 'monacopilot'; +import CopilotEditor from 'monacopilot'; export default function Home() { const [isFastCompletion, setFastCompletion] = useState(false); @@ -20,7 +20,7 @@ export default function Home() { /> -