use filename Component.ripple

Author: hatemhosny

docs/docs/languages/ripple.mdx

@@ -102,7 +102,7 @@ export const customRoot = {
 
 ### Manual Mount
 
-Exports from Ripple code can be imported in [markup editor](../features/projects.mdx#markup-editor) from `"./script"` and used to mount the application instance manually.
+Exports from Ripple code can be imported in [markup editor](../features/projects.mdx#markup-editor) from `"./Component.ripple"` and used to mount the application instance manually.
 See [Exports](#exports) for details.
 
 Example:
@@ -116,7 +116,7 @@ export const manualMount = {
 
 <script type="module">
   import { mount } from 'ripple';
-  import { App } from "./script";
+  import { App } from "./Component.ripple";
 
   mount(App, {
     props: { name: 'Ripple' },

src/livecodes/languages/ripple/lang-ripple-compiler.ts

@@ -7,7 +7,7 @@ import { pkgInfoService } from '../../services/pkgInfo';
 import { getLanguageByAlias } from '../utils';
 
 (self as any).createRippleCompiler = async (initialConfig: Config): Promise<CompilerFunction> => {
-  const MAIN_FILE = '__LiveCodes_App__.ripple';
+  const MAIN_FILE = 'Component.ripple';
   let importedContent = '';
   let imports: Record<string, string> = {};