JSNote is a simple JavaScript code editor with Markdown note functionality.
- Author: Seokhyun Wie (Brandon)
- Email: brandonwie.cs@gmail.com
- Source: Udemy
JSNote is managed by Lerna
$ npm install jsnote-bw
$ npx jsnote-bw serve
Navigate to http://localhost:4005 to start.
Your codes will be saved in notebook.js
file.
The file is in the folder where you execute the command.
A CLI to launch an interactive development environment for writing and documenting code. Support JS, and MarkDown
- Code will be provided to Preview as a string. We have to execute it safely How to solve?
- This code might have advanced JS syntax in it (like JSX) that your browser can't execute How to solve?
- The code might have import statements for other JS files or CSS. We have to deal with those import statements before executing the code How to Solve?
- Problem #2 would be solved if we could get Babel working in our React app
- Take a look at existing apps online and see how they use babel:
- codepen.io: Backend API Server
- babeljs.io: In-Browser Transpiler
// message.js
export default 'Hello there!';
// index.js
import message from './message';
console.log(message);
- AMD:
define(['dep'], (dep) => {});
- common js:
require()
,module.exports
- ES Modules:
import a from 'a'
,export default 123
;
import React from 'react';
=> Transpiled by Babel
const React = require('react');
module.exports = App;
Single file containing both modules linked together in some way
it can deal with both common js
and ES Modules
-
Webpack throws an error if the modules is not installed locally (in case using Backend API) => NpmInstallWebpackPlugin (NPM Registry) :
npm install
automatically -
Make manual request: doesn't install React as an entire dependency
-
Same as #2, but don't use API (No Backend)
- Remote: cache NPM modules to bundle faster / better for users with slow device or limited connection
- Local: fast execution / no need for API server / less complexity
- ESBuild can transpile + bundle code all in the browser. Small amount of JS(user input) => WASM (Go Lang bundler compiled to work in the browser)
- It is primarily intended to only be used in the browser. (documentation)
- Find where the
index.js
is stored (onResolve) - Attemp to load up the
index.js
file (onLoad) - Parse the
index.js
file, find any import/require/exports - If there's any import/require/exports, figure out where the requested file is (onResolve) => UNPKG
- Attemp to load up the file
unpkg.com/packageName
- Get around with CORS when installing NPM packages
- Automatically find latest version
- User-provided code might throw errors and cause our program to crash
- User-provided code might mutate the DOM, causing our program to crash
- A use might accidentally run code provided by another malicious user
- iframe allow communication between the parent and the child
parent.a; // from child html
document.querySelector('iframe').contentWindow; // from parent to child
-
Direct access between frames is allowed when the iframe element does not have a 'sandbox' property, or has a 'sandbox="allow-same-origin"' property
-
Domain, Port, and Protocol (http vs https) have to be the exact same
-
We don't use additional server to prevent direct access (as codepen.io), but we use
sandbox=''
to isolate the iframe
- An attribute of iframe
- troubleshooting: nested script tags cause an error
- use
window.postMessage()
- use
- Cannot use a couple of features as localStorage
- However, it's ignored for the sake of performance and convenience
- CodeMirror: easy, doesn't have out-of-the-box features
- Ace Editor: moderately easy, widely used
- Monaco Editor: hardest to setup, gives almost-perfect editing experience
-
@monaco-editor/react
: main editor -
monaco-editor
: Typescript types -
prettier
: integration for formatting -
bulmaswatch
: CDN CSS Library
-
Resizer is included
-
Will have a conflict with bulmacss
.title
class: check out./src/scss/components/_TextEditor.scss
- cleaner code for reducer
- No need to pass initialState inside reducer, but pass it as second argument in
produce()
function (to resolve unexpectedundefined
type error on states)
- css of icons
- to assist bindActionCreators from being executed infinitely (src/hooks/use-actions.ts)
connect two or more different cells so the later cell can use variables in the previous cell
separate NPM packages
- CLI: jbook
- Local Express API: @jbook/local-api
- Public Express API: @jbook/public-api
- React App: @jbook/local-client
Tool for managing a multi-package project
- In
/packages
folder, go to every sub packages' folder and runnpx typescript --init
andlerna add typescript --dev --scope=packageNames
- open
tsconfig.json
set outDir to./dist
- In
/local-api
package, insidetsconfig.json
you need to setdeclaration
totrue
- In the root directory, go to
package.json
and add script"start": "lerna run start --parallel"
, it will run all packages concurrently
-
the application is in
/packages/local-client
-
/packages/cli
: haslocal-api
as a dependency -
/packages/local-api
: haslocal-client
as a dependency -
/packages/local-client
: has the application