html-react-rules

• For NotePlan code, never use require statements. Use import statements at the top of the file -- never inline/dynamically import modules. Rollup will not process them correctly.

• You should not ever try to build the code with "npm run build" -- this will not work. The programmer will have to use Rollup to build the code. There is separate tooling for this described in @README.md. Leave the building to the programmer.

• NotePlan has global variables that are available to all plugins such as DataStore, CommandBar, Editor, and NotePlan. You can use these variables to access the NotePlan API. You do not need to import them.

Do not commit or push any changes until I tell you to.

Any time you create or are working on a DIV, make sure that DIV has a human-understandable class name so we can debug more easily

Promise Polyfills

Do not use raw Promise.resolve, Promise.all, or Promise.race in plugin code—NotePlan's JSContext may not have them. Use polyfills from @helpers/promisePolyfill.js: initPromisePolyfills(), promiseResolve(), promiseAll(), promiseRace(), waitForCondition(), setTimeoutPolyfill(). After creating/modifying notes, call DataStore.updateCache(note, true).

React Function Memoization (CRITICAL)

ALWAYS wrap functions passed to React Context or child components in useCallback. This prevents infinite render loops that crash the app.

// ❌ WRONG - Causes infinite loops
const requestFromPlugin = (command: string, dataToSend: any = {}) => { ... }

// ✅ CORRECT - Stable function reference
const requestFromPlugin = useCallback((command: string, dataToSend: any = {}) => {
  // ... implementation
}, [dispatch]) // Minimal dependencies

Functions that MUST be memoized:

• requestFromPlugin, sendActionToPlugin, sendToPlugin
• Any function passed to AppProvider props
• Any function used in useEffect dependency arrays

AppContext MUST use useMemo:

const contextValue = useMemo(() => ({
  sendActionToPlugin, sendToPlugin, requestFromPlugin, dispatch, pluginData
}), [sendActionToPlugin, sendToPlugin, requestFromPlugin, dispatch, pluginData])