fix(config): svelte with neutralino problems

Muhammed-Rahif · Sep 26, 2024 · db0f472 · db0f472
1 parent a77d5d9
commit db0f472
Show file tree

Hide file tree

Showing 12 changed files with 556 additions and 467 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@
 <br />
 <div align="center">
  <a href="https://muhammed-rahif.github.io/Notepad/">
- <img src="static/logo.png" alt="Logo" width="80" >
+ <img src="public/logo.png" alt="Logo" width="80" >
  <h3 align="center">Notepad</h3>
  </a>
 
@@ -268,5 +268,5 @@ export default writable(0)
 [license-url]: https://github.com/Muhammed-Rahif/Notepad/blob/main/LICENSE
 [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
 [linkedin-url]: https://linkedin.com/in/Muhammed-Rahif
-[product-screenshot]: static/screenshot.png
+[product-screenshot]: public/screenshot.png
 
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
 
  <body>
  <div id="app"></div>
- <script src="/js/neutralino.js"></script>
+ <script src="__neutralino_globals.js"></script>
  <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
diff --git a/neutralino.config.json b/neutralino.config.json
@@ -16,7 +16,8 @@
  "height": 500,
  "minWidth": 400,
  "minHeight": 200,
- "icon": "/www/favicon.png"
+ "icon": "/www/favicon.png",
+ "enableInspector": true
  }
  },
  "cli": {
@@ -25,7 +26,6 @@
  "extensionsPath": "/extensions/",
  "binaryVersion": "5.4.0",
  "clientVersion": "5.4.0",
- "clientLibrary": "/public/js/neutralino.js",
  "frontendLibrary": {
  "patchFile": "/index.html",
  "devUrl": "http://localhost:5173",

diff --git a/src/App.svelte b/src/App.svelte
@@ -6,9 +6,6 @@
  import favIcon from '@/assets/imgs/favicon.png';
  import favIconDark from '@/assets/imgs/favicon-dark.png';
  import { mode, ModeWatcher } from 'mode-watcher';
- import { init } from '@neutralinojs/lib';
-
- init();
 </script>
 
 <!-- Procedually -->

diff --git a/src/app.css b/src/app.css
@@ -3,73 +3,73 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
  :root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
- 
+
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
- 
+
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
- 
+
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
- 
+
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
- 
+
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
- 
+
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
- 
+
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
- 
+
  --destructive: 0 72.2% 50.6%;
  --destructive-foreground: 0 0% 98%;
- 
+
  --ring: 0 0% 3.9%;
- 
+
  --radius: 0.5rem;
  }
- 
+
  .dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
- 
+
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
- 
+
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
- 
+
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
- 
+
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
- 
+
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
- 
+
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
- 
+
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
- 
+
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
- 
+
  --ring: 0 0% 83.1%;
  }
 }
- 
+
 @layer base {
  * {
  @apply border-border;
@@ -79,9 +79,9 @@
  }
 }
 
-
 html,
-body {
+body,
+#app {
  height: 100%;
  overflow: scroll;
  overflow: hidden;
@@ -104,6 +104,8 @@ body {
 ::-webkit-scrollbar-thumb {
  background: #ff0000;
 }
-::selection {
+::selection,
+::-moz-selection,
+::-webkit-selection {
  @apply bg-zinc-400 dark:bg-zinc-700;
 }
diff --git a/src/lib/components/Editors.svelte b/src/lib/components/Editors.svelte
@@ -34,7 +34,7 @@
  }
  $: isXS = innerWidth <= 450;
  $: tabsMode = $editors.length > 1; // compact mode will not available on mobile width (w<=450), also on pc when multiple editors.
- $: tabsClass = tabsMode ? 'h-[calc(100%-60px)] w-full' : 'h-[calc(100%-96px)] w-full';
+ $: tabsClass = tabsMode ? 'h-[calc(100%-96px)] w-full' : 'h-[calc(100%-60px)] w-full';
 </script>
 
 <svelte:window bind:innerWidth />

diff --git a/src/lib/components/MenuBar.svelte b/src/lib/components/MenuBar.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
  import * as Menubar from '@/components/ui/menubar';
  import { NotepadHelper } from '@/helpers/notepad-helper';
- import { isNeutralino } from '@/utils';
  import { toggleMode } from 'mode-watcher';
  import EditorTitle from './EditorTitle.svelte';
  import { editors } from '@/store/store';
@@ -25,7 +24,7 @@
  items: [
  {
  label: 'New',
- shortcut: isNeutralino() ? 'Ctrl+N' : 'Ctrl+Alt+N',
+ shortcut: isNeutralino ? 'Ctrl+N' : 'Ctrl+Alt+N',
  onClick: NotepadHelper.createNew
  },
  { label: 'Open...', shortcut: 'Ctrl+O' },

diff --git a/src/lib/components/Shortcuts.svelte b/src/lib/components/Shortcuts.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
  import { NotepadHelper } from '@/helpers/notepad-helper';
- import { isNeutralino } from '@/utils';
  import { shortcut, type ShortcutEventDetail } from '@svelte-put/shortcut';
 
  function dispatch(d: ShortcutEventDetail, cb: () => void) {
@@ -13,7 +12,7 @@
  use:shortcut={{
  trigger: {
  key: 'n',
- modifier: isNeutralino() ? ['ctrl'] : ['ctrl', 'alt'],
+ modifier: window.isNeutralino ? ['ctrl'] : ['ctrl', 'alt'],
  callback: (d) => dispatch(d, NotepadHelper.createNew)
  }
  }}

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -54,35 +54,3 @@ export const flyAndScale = (
  easing: cubicOut
  };
 };
-
-// https://stackoverflow.com/a/61725416/14781260
-export function isNeutralino() {
- // Renderer process
- if (
- typeof window !== 'undefined' &&
- typeof window.process === 'object' &&
- (window.process as unknown as { type: string }).type === 'renderer'
- ) {
- return true;
- }
-
- // Main process
- if (
- typeof process !== 'undefined' &&
- typeof process.versions === 'object' &&
- !!process.versions.electron
- ) {
- return true;
- }
-
- // Detect the user agent when the `nodeIntegration` option is set to true
- if (
- typeof navigator === 'object' &&
- typeof navigator.userAgent === 'string' &&
- navigator.userAgent.indexOf('Electron') >= 0
- ) {
- return true;
- }
-
- return false;
-}
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,8 @@
 import './app.css';
 import App from './App.svelte';
+import { init } from '@neutralinojs/lib';
 
+if (isNeutralino) init();
 const app = new App({
  target: document.getElementById('app')!
 });