Doon - Markdown Notes

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Node 16",
  "_version": "16.1.0",

  "compilerOptions": {
    "lib": ["es2021"],
    "module": "node16",
    "target": "es2021",

    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node16"
  }
}

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "outDir": "./dist/main",
    "lib": ["esnext"],
    "noImplicitAny": true,
    "sourceMap": true
  },
  "include": ["src/main/**/*"],
  "exclude": ["src/renderer/**/*"]
}

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es6",
    "outDir": "./dist/renderer",
    "lib": ["dom", "esnext"],
    "noImplicitAny": true,
    "sourceMap": true,
    "jsx": "react"
  },
  "include": ["src/renderer/**/*"],
  "exclude": ["src/main/**/*"]
}

"scripts": {
  "build:main": "tsc -p tsconfig.main.json",
  "build:renderer": "tsc -p tsconfig.renderer.json",
  "build": "npm run build:main && npm run build:renderer"
}

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
    resolve: {
      alias: {
        '@/main': resolve('src/main'),
        '@/lib': resolve('src/main/lib')
      }
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    assetsInclude: 'src/renderer/assets/**',
    resolve: {
      alias: {
        '@/renderer': path.resolve(__dirname, 'src/renderer'),
        '@/components': resolve('src/renderer/src/components'),
        '@/hooks': resolve('src/renderer/src/hooks'),
        '@/assets': resolve('src/renderer/src/assets'),
        '@/store': resolve('src/renderer/src/store'),
        '@/mocks': resolve('src/renderer/src/mocks')
      }
    },
    plugins: [react()]
  }
})

contextBridge.exposeInMainWorld(apiKey, api)

if(process.contextIsolated) {
...
}

[plugin:vite:css] [sass] Can't find stylesheet to import.
  ╷
2 │ @use '@/styles/libs/mixins/index' as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/renderer/src/styles/_base.scss 2:1   @use
  src/renderer/src/styles/styles.scss 1:1  root stylesheet

type Props = {
  value: string;
  onChange?: React.ChangeEventHandler<HTMLInputElement>
  onBlur?: React.FocusEventHandler<HTMLInputElement>
}
export const Input = ({ value, onChange, onBlur }: Props) => (
  <input
    value={value}
    onChange={onChange}
    onBlur={onBlur}
    className={styles.input}
   />
)

type Props = React.ComponentProps<'input'>

export const Input = ({ className, ...props }: Props) => (
  <input
    {...props} // <- className 以外、全ての props を分割代入
    className={clsx(className, styles.input)}
  />
)

const readOnlyAtom = atom((get) => get(priceAtom) * 2)
const writeOnlyAtom = atom(
  null, // it's a convention to pass `null` for the first argument
  (get, set, update) => {
    // `update` is any single value we receive for updating this atom
    set(priceAtom, get(priceAtom) - update.discount)
    // or we can pass a function as the second parameter
    // the function will be invoked,
    //  receiving the atom's current value as its first parameter
    set(priceAtom, (price) => price - update.discount)
  },
)
const readWriteAtom = atom(
  (get) => get(priceAtom) * 2,
  (get, set, newPrice) => {
    set(priceAtom, newPrice / 2)
    // you can set as many atoms as you want at the same time
  },
)

const primitiveAtom = atom(initialValue)
const derivedAtomWithRead = atom(read)
const derivedAtomWithReadWrite = atom(read, write)
const derivedAtomWithWriteOnly = atom(null, write)

const [value, setValue] = useAtom(anAtom)

const countAtom = atom(0)

const Counter = () => {
  const setCount = useSetAtom(countAtom)
  const count = useAtomValue(countAtom)

  return (
    <>
      <div>count: {count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  )
}

Uncaught EvalError: Refused to evaluate a string as JavaScript
because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

    at eval (<anonymous>)
    at getGlobal (@mdxeditor_editor.js?v=1930ed33:65343:10)
    at @mdxeditor_editor.js?v=1930ed33:65344:2

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval';">

export const MarkdownEditor = (): JSX.Element => {
  const [text, setText] = useState<string>('')

  const handletext = (e) => {
    setText(e.target.value)
  }

  return (
    <div>
      <textarea
        id="markdown"
        name="markdown"
        rows={50}
        cols={33}
        onChange={handletext}
        value={text}
        placeholder="Markdown をここに入力"
      ></textarea>
      <ReactMarkdown
        remarkPlugins={[remarkGfm, remarkMath]}
        rehypePlugins={[rehypeHighlight, rehypeKatex, rehypeRaw]}
      >
        {text}
      </ReactMarkdown>
    </div>
  )
}

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    preload: path.join(__dirname, 'preload.js')
  }
});

win.loadURL(`file://${__dirname}/index.html`);

-webkit-app-region: drag;

button {
  cursor: pointer;
  -webkit-app-region: no-drag;
}

textarea {
  word-break: break-all;
  -webkit-app-region: no-drag;
}

Refused to load the script 'http://localhost:8097/'
because it violates the following Content Security Policy directive: "script-src 'self'".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

$palettes: (
  'blue': (
    'default': #0075d1,
    'l1': #e6f8ff,
    'l2': #23445e
  ),
  'green': (
    'default': #1ed535,
    'd1': #10b02b
  ),
);

@function p($group, $val: 'default') {
  @return map-get(map-get($palettes, $group), $val);
}

const writeNote = async (): Promise<WriteNote> => {
  return ipcRenderer.invoke('writeNote')
}

try {
  // Docs: https://electronjs.org/docs/api/context-bridge
  contextBridge.exposeInMainWorld('electron', {
    sendPing,
    getNote,
    createNote,
    deleteNote,
    readNote,
    writeNote
  })
} catch (error) {
  console.error(error)
}


// Renderer (Main World)
window.electron.writeNote()

contextBridge.exposeInMainWorld('electronAPI', {
  loadPreferences: () => ipcRenderer.invoke('load-prefs')
})

export interface IElectronAPI {
  loadPreferences: () => Promise<void>,
}

// interface.d.ts
declare global {
  interface Window {
    electronAPI: IElectronAPI
  }
}

// Renderer (Main World)
window.electronAPI.loadPreferences()

import { debounce } from 'lodash';

const handleMouseMove = debounce((event) => {
  // サーバーに問い合わせ
}, 300);

window.addEventListener('mousemove', handleMouseMove);

import { throttle } from 'lodash';

const handleMouseMove = throttle((event) => {
  // サーバーに問い合わせ
}, 300);

window.addEventListener('mousemove', handleMouseMove);

let timeoutId = null;

const handleMouseMove = (event) => {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = setTimeout(() => {
    // サーバーに問い合わせ
  }, 300);
};

window.addEventListener('mousemove', handleMouseMove);

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const mouseMove$ = fromEvent(window, 'mousemove')
  .pipe(debounceTime(300))
  .subscribe(event => {
    // サーバーに問い合わせ
  });

chunk-BZFZRUQ2.js?v=3d6a074e:521 Warning: Cannot update a component (`MarkdownEditor`) while rendering a different component (`NoteList`). To locate the bad setState() call inside `NoteList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Uncaught Error: Too many re-renders. React limits the number of renders to
prevent an infinite loop.

/*以下の通り処理を修正する*/
onClick={ handleNoteSelect(i)} → onClick={() => handleNoteSelect(i)}

call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

export const DeleteNoteButton = ({ ...props }: ActionButtonProps) => {
  const deleteNote = useSetAtom(deleteNoteAtom) ← topに移動
  const selectedNote = useAtomValue(selectedNoteAtom) ← topに移動

  const handleDelete = async () => {
    if (!selectedNote) {
      return
    }
    const isDeleted = await window.electron.deleteNote(selectedNote.title)

    if (!isDeleted) {
      return
    }

    deleteNote()
  }

Error occurred in handler for 'getNote': Error: No handler registered for 'getNote'
    at WebContents.<anonymous> (node:electron/js2c/browser_init:2:78073)
    at WebContents.emit (node:events:517:28)

ipcMain.handle(channel, listener)

ipcMain.handle('my-invokable-ipc', async (event, ...args) => {
  const result = await somePromise(...args)
  return result
})

async () => {
  const result = await ipcRenderer.invoke('my-invokable-ipc', arg1, arg2)
  // ...
}

x Build failed in 110ms
 ERROR  [vite]: Rollup failed to resolve import "@main/utils/handler" from "/Users/takahashi_masaki/Desktop/doon/src/main/ipc/useNotes.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

npm install ts-node --save-dev

"scripts": {
    ...
    "typeorm": "typeorm-ts-node-commonjs"
}

npm run typeorm migration:show
typeorm migration:show

Show all migrations and whether they have been run or not

オプション:
  -h, --help        ヘルプを表示                                         [真偽]
  -d, --dataSource  Path to the file where your DataSource instance is defined.
                                                                         [必須]
  -v, --version     バージョンを表示                                     [真偽]

必須の引数が見つかりません: dataSource

 npx typeorm migration:show -d src/main/database/typeorm.ts
Error during migration show:
Error: Unable to open file: 

 npx typeorm migration:show -d src/main/database/typeorm.ts                                                                 
Error during migration show:
Error: Unable to open file: "/Users/takahashi_masaki/Desktop/doon/src/main/database/typeorm.ts". Cannot use import statement outside a module
    at Function.loadDataSource (/Users/takahashi_masaki/Desktop/doon/node_modules/typeorm/commands/CommandUtils.js:22:19)
    at async Object.handler (/Users/takahashi_masaki/Desktop/doon/node_modules/typeorm/commands/MigrationShowCommand.js:27:26)

npm run typeorm migration:run -- -d path-to-datasource-config

Error: Unable to open file: "/Users/takahashi_masaki/Desktop/doon/src/main/database/typeorm.ts". ⨯ Unable to compile TypeScript:
src/main/database/typeorm.ts:1:8 - error TS1259: Module '"path"' can only be default-imported using the 'esModuleInterop' flag

1 import path from 'path'
         ~~~~

  node_modules/@types/node/path.d.ts:178:5
    178     export = path;
            ~~~~~~~~~~~~~~
    This module is declared with 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.
src/main/database/typeorm.ts:3:31 - error TS2307: Cannot find module '@main/database/model/noteInfo' or its corresponding type declarations.

3 import { NoteInfoModel } from '@main/database/model/noteInfo'
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/main/database/typeorm.ts:4:28 - error TS2307: Cannot find module '@main/utils/index' or its corresponding type declarations.

4 import { getHomeDir } from '@main/utils/index'
                             ~~~~~~~~~~~~~~~~~~~

    at Function.loadDataSource (/Users/takahashi_masaki/Desktop/doon/node_modules/src/commands/CommandUtils.ts:22:19)

  "compilerOptions": {
    "esModuleInterop": true,
  },

    "paths": {
      "@renderer/*": [
        "src/renderer/src/*"
      ],
      "@main/*": [
        "src/main/*"
      ]
    },
  },

npm i tsconfig-paths

  "ts-node": {
    "require": ["tsconfig-paths/register"]
  },

Error during migration run:
Error: Unable to open file: "/Users/takahashi_masaki/Desktop/doon/src/main/database/typeorm.ts". ⨯ Unable to compile TypeScript:
src/main/database/model/noteInfo.ts:4:2 - error TS1238: Unable to resolve signature of class decorator when called as an expression.
  The runtime will invoke the decorator with 2 arguments, but the decorator expects 1.

4 @Entity('NoteInfoModel')
   ~~~~~~~~~~~~~~~~~~~~~~~
src/main/database/model/noteInfo.ts:6:4 - error TS1240: Unable to resolve signature of property decorator when called as an expression.
  Argument of type 'ClassFieldDecoratorContext<NoteInfoModel, string> & { name: "uuid"; private: false; static: false; }' is not assignable to parameter of type 'string | symbol'.

6   @PrimaryGeneratedColumn('uuid')
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/main/database/model/noteInfo.ts:9:4 - error TS1240: Unable to resolve signature of property decorator when called as an expression.
  Argument of type 'ClassFieldDecoratorContext<NoteInfoModel, string> & { name: "title"; private: false; static: false; }' is not assignable to parameter of type 'string | symbol'.

9   @Column('text', { nullable: false })
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/main/database/model/noteInfo.ts:12:4 - error TS1240: Unable to resolve signature of property decorator when called as an expression.
  Argument of type 'ClassFieldDecoratorContext<NoteInfoModel, string> & { name: "content"; private: false; static: false; }' is not assignable to parameter of type 'string | symbol'.

12   @Column('text', { nullable: true })
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/main/database/model/noteInfo.ts:15:4 - error TS1240: Unable to resolve signature of property decorator when called as an expression.
  Argument of type 'ClassFieldDecoratorContext<NoteInfoModel, Date> & { name: "lastEditTime"; private: false; static: false; }' is not assignable to parameter of type 'string | symbol'.

15   @Column('datetime')
      ~~~~~~~~~~~~~~~~~~

"experimentalDecorators": true,

import { DataSource } from "typeorm";
import { NoteInfoModel } from "./entity/NoteInfoModel";

export const AppDataSource = new DataSource({
  type: "sqlite",
  database: "database.sqlite",
  synchronize: true,
  logging: true,
  entities: [NoteInfoModel],  // エンティティを登録
  migrations: [],
  subscribers: [],
});

entities: [__dirname + "/entity/**/*.js"],

entities: [path.join(__dirname, '/database/model/**/*.js')]

synchronize: true,

import { atom } from 'jotai'
import { unwrap } from 'jotai/utils'

const countAtom = atom(0)
const delayedCountAtom = atom(async (get) => {
  await new Promise((r) => setTimeout(r, 500))
  return get(countAtom)
})
const unwrapped1Atom = unwrap(delayedCountAtom)
// The value is `undefined` while pending
const unwrapped2Atom = unwrap(delayedCountAtom, (prev) => prev ?? 0)