{"_id":"@ashenote/local-client","name":"@ashenote/local-client","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ashenote/local-client","version":"1.0.0","publishConfig":{"access":"public"},"scripts":{"start":"react-app-rewired start","build":"react-app-rewired build","test":"react-app-rewired test","eject":"react-app-rewired eject","prepublishOnly":"npm run build"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/parser":"^7.23.0","@babel/traverse":"^7.23.2","@fortawesome/fontawesome-free":"^6.4.2","@monaco-editor/react":"^4.6.0","@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","@types/jest":"^27.5.2","@types/node":"^16.18.58","@types/prettier":"^2.7.3","@types/react":"^18.2.27","@types/react-dom":"^18.2.12","@types/react-resizable":"3.0.5","@uiw/react-md-editor":"^3.24.1","assert":"^2.1.0","async-mutex":"^0.4.0","axios":"^1.5.1","buffer":"^6.0.3","bulmaswatch":"^0.8.1","classnames":"^2.3.2","constants-browserify":"^1.0.0","esbuild-wasm":"0.19.4","immer":"^10.0.3","localforage":"^1.10.0","monaco-jsx-highlighter":"2.0.4","os-browserify":"^0.3.0","prettier":"^3.0.3","process":"^0.11.10","react":"^18.2.0","react-app-rewired":"^2.2.1","react-dom":"^18.2.0","react-redux":"^8.1.3","react-resizable":"3.0.5","react-scripts":"5.0.1","redux":"^4.2.1","redux-thunk":"^2.4.2","reselect":"^4.1.8","typescript":"^4.9.5","web-vitals":"^2.1.4","webpack":"^5.89.0"},"gitHead":"b59495b25e129d6ebc4b7372924f71557c046ad9","description":"We installed the `esbuild-wasm` library since this represents the \"Web assembly\" version of ESBuild. Web assembly is supported on all modern browsers, and can run compiled code from `C`, `C++`, `Rust`, and `Go`.","_id":"@ashenote/local-client@1.0.0","_nodeVersion":"18.18.0","_npmVersion":"lerna/3.22.1/node@v18.18.0+x64 (linux)","dist":{"integrity":"sha512-TEX/WA6+e8Yn2aGltgWDO755+aPAOw8zpXUYz25W04XSYRbauQXcam/T0AszhNFRiSie5T8EPQBi9UGb8dEYPQ==","shasum":"9a2e65c8fedc74b68db99bf79e37f0aa3e431f8d","tarball":"https://registry.npmjs.org/@ashenote/local-client/-/local-client-1.0.0.tgz","fileCount":21,"unpackedSize":14161249,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICjxhTs9IxEdaDOeaFtPyrmgfZFOHUT3cYceHFdUKAt2AiEAm8HAezBGOxmjnw5jtuccKy7XZE7bZHjUCQpHlQFvwsU="}]},"_npmUser":{"name":"spaceamit","email":"spaceamit@gmail.com"},"directories":{},"maintainers":[{"name":"spaceamit","email":"spaceamit@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/local-client_1.0.0_1698810263784_0.6631498282700008"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-01T03:44:23.674Z","1.0.0":"2023-11-01T03:44:24.246Z","modified":"2023-11-01T03:44:24.525Z"},"maintainers":[{"name":"spaceamit","email":"spaceamit@gmail.com"}],"description":"We installed the `esbuild-wasm` library since this represents the \"Web assembly\" version of ESBuild. Web assembly is supported on all modern browsers, and can run compiled code from `C`, `C++`, `Rust`, and `Go`.","readme":"# ESBuild\n\nWe installed the `esbuild-wasm` library since this represents the \"Web assembly\" version of ESBuild.\nWeb assembly is supported on all modern browsers, and can run compiled code from `C`, `C++`, `Rust`, and `Go`.\n\n## Transform\n\nThis is a limited special-case of `build` that transforms a string of code\nrepresenting an in-memory file in an isolated environment that's completely disconnected from any other files.\n\n## Bundle\n\nJS in the browser has no access to local filesystem.\nSo, we are intercepting the filesystem lookup step in the build process,\nand redirecting it to the correct path on `npmjs` (technically `unpkg`).\n\nAs a bonus, `unpkg` auto routes the requests to the latest version's `index` file\n(unless a  specific version is mentioned in the request).\n\n## CSS workaround for in-browser loading\n\nAdd this to the plugin to load CSS into ESBuild\n```ts\nconst cssContents = '...'; // Fetch from remote url\nconst escaped = cssContents\n    .replace(/\\n/g, '')\n    .replace(/\"/g, '\\\\\"')\n    .replace(/'/g, \"\\\\'\");\nconst contents = `\n    const style = document.createElement('style');\n    style.innerText = '${escaped}';\n    document.head.appendChild(style);\n  `;\nconst result: esbuild.OnLoadResult = {\n  loader: 'jsx',\n  contents,\n  // ...\n};\nreturn result;\n```\n\n> Note that this will not work if the CSS being loaded has imports of its own,\n> or fetching font files using `url()`.\n\n## Plugins\n\n> Works similarly for Webpack too.\n\n|                                             |                  |\n|:-------------------------------------------:|:----------------:|\n|               Trigger bundler               |                  |\n|                                             |                  |\n|                      ↓                      |                  |\n|                                             |                  |\n|          ESBuild bundling process           |                  |\n|                                             |                  |\n|                      ↓                      |                  |\n|                                             |                  |\n|      Locate `index.js` (or equivalent)      | `onResolve` step |\n|                                             |                  |\n|                      ↓                      |                  |\n|                                             |                  |\n|          Load the `index.js` file           |  `onLoad` step   |\n|                                             |                  |\n|                      ↓                      |                  |\n|                                             |                  |\n| Parse `index.js` and find imports & exports |                  |\n|                                             |                  |\n|                      ↓                      |                  |\n|                                             |                  |\n|         Locate the imported file(s)         | `onResolve` step |\n|                                             |                  |\n|                      ↓                      |                  |\n|                                             |                  |\n|          Load the imported file(s)          |  `onLoad` step   |\n|                                             |                  |\n\nAll work starts with the `build` input, which represents the entire build process.\nWe primarily interact with it by attaching event listeners:\n- `onResolve`: Overrides `ESbuild`'s default process of locating a file, and returning a path.\n- `onLoad`: Overrides `ESbuild`'s default step of fetching the file based on the path returned by the resolver.\n\nWe can define multiple `onResolve` and multiple `onLoad` functions within a single plugin,\nfor example, different listeners based on different values for the `filter` parameter,\nto choose different processing steps for different files.\n`namespace` can also be used to restrict the set of files processed by a given `onResolve` or `onLoad`. \n\nIf the callback functions exit without returning anything,\nthen the bundler proceeds to the next callback in the queue.\nOtherwise, the bundler stops as soon as it finds a return value for that file.\n\n# URL function in Browser JS\n\n- `new URL('./path', 'https://unpkg.com/package')` returns `https://unpkg.com/path` in `href`.\n- `new URL('./path', 'https://unpkg.com/package/')` returns `https://unpkg.com/package/path` in `href`.\n- `new URL('./', 'https://unpkg.com/package/src/index.js')` returns `/package/src/` in `pathname`, i.e., the directory containing the file.\n\n# Caching in browser\n\n1. Local storage - easy to use, but fairly limited in size.\n2. Indexed DB - harder to use, but larger.\n\n# HTML `iframe`\n\nUsed to embed one HTML document into another.\nUse the `sandbox` attribute to prevent malicious code in an `iframe` from accessing the parent frame.\nTwo of those values, `allow-scripts`\nand `allow-same-origin` together can allow the embedded document to alter the sandbox attribute itself\nif the `iframe` and the parent have the same origin -\n[MDN docs](\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox).\nSo it's preferable to fetch the `iframe` from a separate domain for maximal security.\n\n## `allow-same-origin`\n\nThis sandbox option allows the child and the parent windows to share contexts if they have the same:\n1. Domain\n2. Port\n3. Protocol (http vs https)\n\nDisallowing this means that you also access to local storage and cookies.\n\n> We can still use `postMessage` and event listeners to indirectly communicate\n> between two different contexts, and this is considered safe.\n\n# Open source browser-based editors\n\n| Code mirror                                                      | Ace Editor                                              | Monaco Editor                                                   |\n|------------------------------------------------------------------|---------------------------------------------------------|-----------------------------------------------------------------|\n| Easiest to use                                                   | Moderately easy to use. Widely used                     | Hardest to setup                                                |\n| Few out-of-the-box features                                      | Additional features and languages supported via plugins | Almost perfect experience immediately                           |\n| [React lib](https://www.npmjs.com/package/@uiw/react-codemirror) | [React lib](https://www.npmjs.com/package/react-ace)    | [React lib](https://www.npmjs.com/package/@monaco-editor/react) |\n\n# Webpack 5 polyfill fixes\n\nCreate React App v5 has many conflicts with some of these libraries even with the latest versions.\nTo avoid ejecting or downgrading to CRA v4, we can instead make use of the `react-app-rewired` library.\n\nRequired steps:\n\n1. Install dependencies\n\n   ```shell\n   npm install --save-dev react-app-rewired constants-browserify \\\n     assert os-browserify --legacy-peer-deps\n   ```\n\n   ```shell\n   npm install buffer process\n   ```\n\n2. In the root of your project (where the `package.json file` is located) create a `config-overrides.js` file and add the following code:\n\n   ```js\n   module.exports = function override(config, env) {\n     config.resolve.fallback = {\n       ...config.resolve.fallback,\n       constants: require.resolve('constants-browserify'),\n       assert: require.resolve('assert/'),\n       os: require.resolve('os-browserify/browser'),\n     };\n     config.ignoreWarnings = [\n       {\n         message:\n           /Critical dependency: the request of a dependency is an expression/,\n       },\n     ];\n     return config;\n   };\n   ```\n\n3. Update your `package.json` scripts to the following:\n\n   ```json\n   {\n     \"start\": \"react-app-rewired start\",\n     \"build\": \"react-app-rewired build\",\n     \"test\": \"react-app-rewired test\",\n     \"eject\": \"react-app-rewired eject\"\n   }\n   ```\n\nThese changes will provide the missing native Node polyfills that Webpack v5 removed.\n\n# How to make a component take all remaining width\n\n1. Add `flex-grow: 1` to the component's CSS.\n2. Add `width: 100%` to the component's children's CSS.\n\nThis tells the component to take up all remaining width without competing with its siblings.\n\n# Redux concepts\n\n1. Actions\n   - The different actions that we need to support on the state.\n   - For example, adding a new code cell, updating an existing cell, etc.\n   - They also define the payload that the action type needs for the state change.\n   - Basically one interface for each \"action\" we want to support.\n2. Action creators\n   - Functions that return an object that represents the corresponding action.\n   - For example, an object that contains all information about a new code cell that we are trying to create.\n   - The return type basically satisfies the interface corresponding to the \"action\".\n     - Instead of a return type, we can also `dispatch` the objects, where each object is a valid action. Useful when doing async work, like bundling code.\n3. Reducers\n   - Functions that input the existing state and an action, and return the new state.\n\n# Easing functions for CSS\n\nhttps://easings.net\n\n# Fixing the `add-bar` flicker issue\n\nWhen we add a new cell, the `add-bar` we had been hovering over fades out and immediately back in.\nAnd the `add-bar` right below fades out.\nThis happens because the `add-bar` we had interacted with got pushed down, due to the insertion of a new cell.\nThere are two possible solutions to this.\n\n## 1. Immediately hide the `add-bar` upon click\n\n- `:active` is triggered when the user interacts with the element.\n- `!important` is necessary to ensure that no other selector overrides it.\n- _The `add-bar` gets hidden even before the user has let go off the mouse click_.\n\n```css\n.add-cell:active {\n   opacity: 0 !important;\n   transition: opacity 0s;\n}\n```\n\n## 2. Instead of inserting a cell before, add it after\n\nThis means that the new cell will be added below the `add-bar`,\nso the `add-bar` being clicked won't change position in the DOM.\n","readmeFilename":"README.md"}