Fix to use more accurate types with custom isArray() and add lint (#5261)

* Fix to use more accurate types with custom isArray()

* Add lint against Array.isArray()

src/components/AstExplorer.tsx

@@ -7,6 +7,7 @@ import { trap } from 'lib/trap'
 import { codeToIdSelections } from 'lib/selections'
 import { codeRefFromRange } from 'lang/std/artifactGraph'
 import { defaultSourceRange, SourceRange, topLevelRange } from 'lang/wasm'
+import { isArray } from 'lib/utils'
 
 export function AstExplorer() {
   const { context } = useModelingContext()
@@ -166,12 +167,12 @@ function DisplayObj({
             {Object.entries(obj).map(([key, value]) => {
               if (filterKeys.includes(key)) {
                 return null
-              } else if (Array.isArray(value)) {
+              } else if (isArray(value)) {
                 return (
                   <li key={key}>
                     {`${key}: [`}
                     <DisplayBody
-                      body={value}
+                      body={value as any}
                       filterKeys={filterKeys}
                       node={node}
                     />

src/components/ModelingSidebar/ModelingPanes/CodeEditor.tsx

@@ -14,6 +14,7 @@ import {
 } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
 import { oneDark } from '@codemirror/theme-one-dark'
+import { isArray } from 'lib/utils'
 
 //reference: https://github.com/sachinraja/rodemirror/blob/main/src/use-first-render.ts
 const useFirstRender = () => {
@@ -86,6 +87,18 @@ const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>((props, ref) => {
   return <div ref={editor}></div>
 })
 
+/**
+ * The extensions type is quite weird.  We need a special helper to preserve the
+ * readonly array type.
+ *
+ * @see https://github.com/microsoft/TypeScript/issues/17002
+ */
+function isExtensionArray(
+  extensions: Extension
+): extensions is readonly Extension[] {
+  return isArray(extensions)
+}
+
 export function useCodeMirror(props: UseCodeMirror) {
   const {
     onCreateEditor,
@@ -103,7 +116,7 @@ export function useCodeMirror(props: UseCodeMirror) {
   const isFirstRender = useFirstRender()
 
   const targetExtensions = useMemo(() => {
-    let exts = Array.isArray(extensions) ? extensions : []
+    let exts = isExtensionArray(extensions) ? extensions : []
     if (theme === 'dark') {
       exts = [...exts, oneDark]
     } else if (theme === 'light') {