fix: makes PreviewCode also load ace async (#11)

.github/workflows/main.yml

@@ -1,17 +1,31 @@
 name: CI & Release
 on:
+  # Build on pushes to release branches
   push:
+    branches: [main]
+  # Build on pull requests targeting release branches
+  pull_request:
+    branches: [main]
   workflow_dispatch:
     inputs:
       release:
-        description: 'Release new version'
+        description: Release new version
         required: true
         default: false
         type: boolean
 
 jobs:
+  log-the-inputs:
+    name: Log inputs
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          echo "Inputs: $INPUTS"
+        env:
+          INPUTS: ${{ toJSON(inputs) }}
+
   build:
-    name: 'Lint & Build'
+    name: Lint & Build
     runs-on: ubuntu-latest
     steps:
       - name: Set git to use LF
@@ -22,32 +36,33 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: lts/*
-          cache: 'npm'
+          cache: npm
       - run: npm ci
       - run: npm run lint --if-present
-      - run: npm run build
+      - run: npm run prepublishOnly
 
   test:
-    name: 'Test'
+    name: Test
     needs: build
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
-        platform: [ubuntu-latest, macos-latest]
-    runs-on: ${{ matrix.platform }}
+        os: [ macos-latest, ubuntu-latest ]
+        node: [ lts/*, current ]
+    runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npm install
-      - run: npm test
+          node-version: ${{ matrix.node }}
+          cache: npm
+      - run: npm ci
+      - run: npm test --if-present
 
   release:
-    name: 'Semantic release'
+    name: Semantic release
     needs: test
     runs-on: ubuntu-latest
+    # only run if opt-in during workflow_dispatch
     if: inputs.release == true
     steps:
       - uses: actions/checkout@v3
@@ -58,10 +73,13 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: lts/*
-          cache: 'npm'
-      - run: npm install
-      # Branches that will release new versions are defined in .releaserc.json
+          cache: npm
+      - run: npm ci
+        # Branches that will release new versions are defined in .releaserc.json
       - run: npx semantic-release
+        # Don't allow interrupting the release step if the job is cancelled, as it can lead to an inconsistent state
+        # e.g. git tags were pushed but it exited before `npm publish`
+        if: always()
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

README.md

@@ -179,6 +179,15 @@ with default configuration for build & watch scripts.
 See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
 on how to run this plugin with hotreload in the studio.
 
+### Dev note on parcel + vite in dev mode:
+Vite will emit a warning when using yalc add + link in a Studio running with
+vite dev server. 
+It happens because parcel appends ?currentTimestamp to the import statement for
+cache busting, which is [not supported by vite](https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations).
+
+However, the code _works_, and when building for production this is not an issue, as parcel
+will not suffix the timestamp in the prod bundle.
+
 ## Release new version
 
 Run ["CI & Release" workflow](https://github.com/sanity-io/code-input/actions).

src/CodeInput.tsx

@@ -276,7 +276,6 @@ export function CodeInput(props: CodeInputProps) {
         <EditorContainer radius={1} shadow={1} readOnly={readOnly}>
           {AceEditor && (
             <Suspense fallback={<div>Loading code editor...</div>}>
-              (
               <AceEditor
                 ref={aceEditorRef}
                 mode={mode}
@@ -299,7 +298,6 @@ export function CodeInput(props: CodeInputProps) {
                 onFocus={handleCodeFocus}
                 onBlur={onBlur}
               />
-              )
             </Suspense>
           )}
         </EditorContainer>

src/PreviewCode.tsx

@@ -1,11 +1,10 @@
-import React, {useCallback, useEffect, useRef} from 'react'
-import AceEditor from 'react-ace'
+import React, {Suspense, useCallback, useEffect, useRef} from 'react'
 import styled from 'styled-components'
 import {Box} from '@sanity/ui'
 import {ACE_EDITOR_PROPS, ACE_SET_OPTIONS} from './config'
 import createHighlightMarkers from './createHighlightMarkers'
 import {CodeInputType, CodeInputValue} from './types'
-import './ace-editor/editorSupport'
+import {useAceEditor} from './ace-editor/AceEditorLazy'
 
 const PreviewContainer = styled(Box)`
   position: relative;
@@ -54,34 +53,39 @@ export default function PreviewCode(props: PreviewCodeProps) {
   const fixedLanguage = type?.options?.language
 
   const mode = value?.language || fixedLanguage || 'text'
+  const AceEditor = useAceEditor()
 
   return (
     <PreviewContainer>
       <PreviewInner padding={4}>
-        <AceEditor
-          ref={aceEditorRef}
-          focus={false}
-          mode={mode}
-          theme="monokai"
-          width="100%"
-          onChange={handleEditorChange}
-          maxLines={200}
-          readOnly
-          wrapEnabled
-          showPrintMargin={false}
-          highlightActiveLine={false}
-          cursorStart={-1}
-          value={(value && value.code) || ''}
-          markers={
-            value && value.highlightedLines
-              ? createHighlightMarkers(value.highlightedLines)
-              : undefined
-          }
-          tabSize={2}
-          showGutter={false}
-          setOptions={ACE_SET_OPTIONS}
-          editorProps={ACE_EDITOR_PROPS}
-        />
+        {AceEditor && (
+          <Suspense fallback={<div>Loading code editor...</div>}>
+            <AceEditor
+              ref={aceEditorRef}
+              focus={false}
+              mode={mode}
+              theme="monokai"
+              width="100%"
+              onChange={handleEditorChange}
+              maxLines={200}
+              readOnly
+              wrapEnabled
+              showPrintMargin={false}
+              highlightActiveLine={false}
+              cursorStart={-1}
+              value={(value && value.code) || ''}
+              markers={
+                value && value.highlightedLines
+                  ? createHighlightMarkers(value.highlightedLines)
+                  : undefined
+              }
+              tabSize={2}
+              showGutter={false}
+              setOptions={ACE_SET_OPTIONS}
+              editorProps={ACE_EDITOR_PROPS}
+            />
+          </Suspense>
+        )}
       </PreviewInner>
     </PreviewContainer>
   )

src/config.ts

@@ -1,6 +1,6 @@
 import {CodeInputLanguage} from './types'
 
-// NOTE: MAKE SURE THESE ALIGN WITH IMPORTS IN ./editorSupport
+// NOTE: MAKE SURE THESE ALIGN WITH IMPORTS IN ./ace-editor/editorSupport
 export const SUPPORTED_LANGUAGES: CodeInputLanguage[] = [
   {title: 'Batch file', value: 'batchfile'},
   {title: 'C#', value: 'csharp'},

src/createHighlightMarkers.ts

@@ -1,4 +1,4 @@
-import {IMarker} from 'react-ace'
+import type {IMarker} from 'react-ace'
 import {css} from 'styled-components'
 
 export const highlightMarkersCSS = css`