Skip to content

Latest commit

 

History

History
295 lines (213 loc) · 11.2 KB

README-research.md

File metadata and controls

295 lines (213 loc) · 11.2 KB

Developers Research

Global short cuts

How can I do refresh in electron html app electron/electron#11895

Masonry Layout

https://github.com/cedricdelpoux/react-responsive-masonry#readme

npm install react-responsive-masonry --save
npm i --save-dev @types/react-responsive-masonry

Funktioniert leider nicht,

https://www.dhiwise.com/post/how-to-implement-a-react-masonry-component-in-web-application https://github.com/jaredLunde/masonic

npm i masonic

Plugin-System aka external js-files

Introduced in Node.js 12.7.0, Package Exports is the modern approach for npm packages to specify entry points — the mapping of package subpaths which can be externally imported and which file(s) they should resolve to.

Conflict-Management

Das funktioniert noch überhaupt nicht.

https://stackoverflow.com/questions/24185125/pouchdb-manually-managing-conflicts?rq=3

Unterscheidung

Ich würde gern die Unterscheidung

  • 'mit relational-pouch', Zugriff über relational-pouch (result, id, doctype, ...)
  • 'mit relational-pouch', Zugriff über pouchdb (result.data, result._id (composite doctype+uuid), result._ref) ...
  • und
  • 'ohne relational-pouch'

elegant lösen und alles ganz transpartent unterstützen. Suche nach:

//* PouchDB without Plugin relational-pouch

um einige der Code Stellen zu identifizieren.

könnte in den settings gespeichert sein, unter den Verbindungsparametern - eher ungünstig. das wird ja zur Entwurfszeit festgelegt.

Siehe auch src/app/common/PouchDB_Tool.ts

Links

// STATIC_ASSETS: Assets für TLDRAW https://stackoverflow.com/questions/60839621/cant-use-static-files-in-electron-forge https://www.electronforge.io/config/configuration

Hi, i am a newbie writing a fancy Electron-App, using electron-forge, React + andt. I try to integrate tldraw into it and it looks like this. I added https://unpkg.com to the 'img-src' Content-Security-Policy in index.html and in forge.config.ts 'devContentSecurityPolicy' to get it up runnig like so. That's a good start. But I would like to store the assets locally, and that doesn't work at all. Is there an example of how to implement this?

Save and load https://tldraw.dev/docs/persistence

Verschiedene Probleme

param sind eigentlich view_meta / list_meta

Auch für die Boilerplate

Das Kontextmenü öffnet sich nicht (um code zu analysieren) In der ElectronReact Boilerplate konnte man das: Inspect Element, siehe:

/Users/cnichte/develop-software/03-examples/electron-react-boilerplate/src/main/menu.ts

ContentSecurityPolicy

Lösung:

  1. https://stackoverflow.com/questions/69790650/contentsecuritypolicy-preventing-fetch-request-in-electron
  2. https://www.electronforge.io/config/plugins/webpack

Siehe einmal in Datei src/index.html, und für die Entwicklung in Datei forge.config.ts:

devContentSecurityPolicy aus 1:

{ 
  devContentSecurityPolicy: 'default-src \'self\' \'unsafe-inline\' data:; script-src \'self\' \'unsafe-eval\' \'unsafe-inline\' data:`' 
}

devContentSecurityPolicy aus 2:

{ 
  devContentSecurityPolicy:  'default-src * self blob: data: gap:; style-src * self \'unsafe-inline\' blob: data: gap:; script-src * \'self\' \'unsafe-eval\' \'unsafe-inline\' blob: data: gap:; object-src * \'self\' blob: data: gap:; img-src * self \'unsafe-inline\' blob: data: gap:; connect-src self * \'unsafe-inline\' blob: data: gap:; frame-src * self blob: data: gap:;' 
}

aus 2, ohne die \:

default-src * self blob: data: gap:;
style-src * self 'unsafe-inline' blob: data: gap:;
script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:;
object-src * 'self' blob: data: gap:;
img-src * self 'unsafe-inline' blob: data: gap:;
connect-src self * 'unsafe-inline' blob: data: gap:;
frame-src * self blob: data: gap:;

2 hab ich getestet, und die Vorschaubilder beim Upload werden geladen.

Recherchen

Devtools extensions

electron-forge versus electron-vite

Provide a release und Auto Updater

Custom form Items

HOW TO HANDLE STATIC ASSETS

Möglichkeit 1

<img src='static://assets/images/a.png'/>

main.ts

import { session } from "electron";
import path from 'path';

app.on('ready', () => {
  // Customize protocol to handle static resource.
  // Register a protocol named static, and use static:// as the prefix of you image resources later.
  session.defaultSession.protocol.registerFileProtocol('static', (request:any, callback:any) => {
    const fileUrl = request.url.replace('static://', '');
    const filePath = path.join(app.getAppPath(), '.webpack/renderer', fileUrl);
    callback(filePath);
  });

  createWindow();
});

webpack.plugins.ts

import CopyWebpackPlugin from 'copy-webpack-plugin';

import path from 'path';
const assets = [ 'assets' ];

  // STATIC_ASSETS:
  // https://nodejs.org/api/path.html#pathresolvepaths
  // __dirname absolute path of the directory containing the currently executing file.
  new CopyWebpackPlugin(
    {
      patterns: assets.map((asset) => ({
        from: path.resolve(__dirname, 'src', asset),
        to: path.resolve(__dirname, '.webpack/renderer', asset)
      }))
    }),

forge.config.ts

"devContentSecurityPolicy": "default-src 'self' 'unsafe-eval' 'unsafe-inline' static: http: https: ws:", // <--- this line