additional vite config for testing and chunking

Author: SharonStrats

package-lock.json

@@ -18,6 +18,9 @@
   ],
   "sideEffects": [
     "**/*.css",
+    "src/register-components.ts",
+    "src/components/source-provider/SourceProvider.ts",
+    "src/components/sourceEditorCard/SourceEditorCard.ts",
     "dist/**/*.js"
   ],
   "scripts": {

package.json

@@ -3,7 +3,7 @@ import { ref } from 'lit/directives/ref.js'
 import { NamedNode, LiveStore } from 'rdflib'
 import { widgets, icons } from 'solid-ui'
 import { SourcePaneState } from './types'
-import SourceEditorCard from './components/sourceEditorCard/SourceEditorCard'
+import type SourceEditorCard from './components/sourceEditorCard/SourceEditorCard'
 
 /* This we will use in the header ticket, didn't want to lose the code */
 export function canEditSource (subject: NamedNode, sourcePaneState: SourcePaneState) {

src/Header.ts

@@ -1,5 +1,5 @@
-import { provide } from '@lit/context'
 import { html } from 'lit'
+import { provide } from '@lit/context'
 import { customElement, property } from 'lit/decorators.js'
 import { NamedNode } from 'rdflib'
 import { DataBrowserContext } from 'pane-registry'
@@ -87,9 +87,9 @@ export default class SourceProvider extends WebComponent {
     const { renderStatusSection } = getStatusSection()
 
     return html`
-      ${renderHeader(store, subject, this.sourcePaneState)}
+      ${renderHeader(store as any, subject as any, this.sourcePaneState)}
       <solid-panes-source-editor-card></solid-panes-source-editor-card>
       ${renderStatusSection()}
     `
   }
-}
+}

src/components/source-provider/SourceProvider.ts

@@ -7,14 +7,15 @@ import { applyResponseHeaders, checkSyntax, fetchContentAndMetadata, getResponse
 import styles from './SourceEditorCard.styles.css'
 import { WebComponent } from 'solid-ui'
 import { getStatusSection } from '../../StatusSection'
-import { SourceContext } from '../../primitives/context'
-import { sourceContext } from '../../primitives/context'
 import 'solid-ui/components/button'
 import { compactable } from '../../compactableFormats'
+import { SourceContext } from '../../primitives/context'
+import { sourceContext } from '../../primitives/context'
 
 @customElement('solid-panes-source-editor-card')
 export default class SourceEditorCard extends WebComponent {
   static styles = styles
+
   private _editor?: SourceEditor
   private _originalContent?: string
   private _dirtyState = false
@@ -84,7 +85,7 @@ export default class SourceEditorCard extends WebComponent {
     }
     try {
       const { SourceEditor } = await import('./SourceEditor')
-      const { content, metadata } = await fetchContentAndMetadata(sourceContext.context.session.store, new NamedNode(sourceContext.subject), sourceContext.sourcePaneState)
+      const { content, metadata } = await fetchContentAndMetadata(sourceContext.context.session.store as any, new NamedNode(sourceContext.subject), sourceContext.sourcePaneState as any)
       this._originalContent = content
       this._editor = new SourceEditor()
       await this._editor.initialize(sourcePaneEditor, content, metadata.contentType, 'dark', dirty => {
@@ -126,13 +127,13 @@ export default class SourceEditorCard extends WebComponent {
   private async saveBack () {
     const sourceContext = this._requireSourceContext()
 
-    const store = sourceContext.context.session.store
+    const store = sourceContext.context.session.store as any
     const subject = new NamedNode(sourceContext.subject)
     const sourcePaneState = sourceContext.sourcePaneState
     const fetcher = store.fetcher
     const data = this.getEditor()?.getValue() ?? ''
     const { contentType, eTag } = sourceContext.sourcePaneState
-    if (!checkSyntax(store, subject, data, contentType, subject)) {
+    if (!checkSyntax(store, subject as any, data, contentType, subject as any)) {
       const { showError } = getStatusSection()
       showError('Syntax error: fix the document before saving.')
       return
@@ -147,7 +148,7 @@ export default class SourceEditorCard extends WebComponent {
       try {
         const response = await fetcher.webOperation('HEAD', subject.uri) // , defaultFetchHeaders())
         if (!happy(response, 'HEAD')) return
-        applyResponseHeaders(sourcePaneState, getResponseHeaders(store, subject, response))
+        applyResponseHeaders(sourcePaneState as any, getResponseHeaders(store, subject as any, response))
         this._resetEditorState()
       } catch (err) {
         throw err
@@ -164,7 +165,7 @@ export default class SourceEditorCard extends WebComponent {
     const { contentType } = sourceContext.sourcePaneState
     const compactContentType = contentType?.split(';')[0]
     const { showError } = getStatusSection()
-    const store = sourceContext.context.session.store
+    const store = sourceContext.context.session.store as any
     const subjectNode = new NamedNode(sourceContext.subject)
 
     if (compactContentType && compactable[compactContentType]) {

src/components/sourceEditorCard/SourceEditorCard.ts

@@ -0,0 +1,2 @@
+void import('./components/source-provider/SourceProvider').then(() => undefined)
+void import('./components/sourceEditorCard/SourceEditorCard').then(() => undefined)

src/register-components.ts

@@ -9,15 +9,10 @@ import { DataBrowserContext, NewPaneOptions } from 'pane-registry'
 import * as mime from 'mime-types'
 import { html, render as litRender } from 'lit'
 import { log } from './debug'
-import SourceEditorCard from './components/sourceEditorCard/SourceEditorCard'
-import SourceProvider from './components/source-provider/SourceProvider'
 import './sourcePane.css'
+import './register-components'
 import { SourcePaneState } from './types'
 
-// Keep custom-element modules in the bundle; they are registered for side effects.
-void SourceEditorCard
-void SourceProvider
-
 const pane = {
   icon: icons.iconBase + 'noun_109873.svg', // noun_109873_51A7F9.svg
 

src/sourcePane.ts

@@ -1,52 +1,54 @@
-const { getResponseHeaders, fetchContentAndMetadata } = require('../src/helpers')
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchContentAndMetadata, getResponseHeaders } from '../src/helpers.ts'
 
 describe('helpers', () => {
   beforeEach(() => {
-    jest.clearAllMocks()
+    vi.clearAllMocks()
   })
 
   it('reads response headers into metadata', () => {
     const response = {
       headers: {
-        get: jest.fn((name) => {
+        get: vi.fn((name) => {
           if (name === 'content-type') return 'text/turtle; charset=utf-8'
           if (name === 'allow') return 'GET,PUT'
           if (name === 'etag') return '"abc"'
           return null
-        }),
-      },
+        })
+      }
     }
-    const store = { each: jest.fn(), any: jest.fn(), anyValue: jest.fn(), sym: jest.fn() }
+    const store = { each: vi.fn(), any: vi.fn(), anyValue: vi.fn(), sym: vi.fn() }
     const subject = { uri: 'https://example.org/profile/card' }
 
     expect(getResponseHeaders(store, subject, response)).toEqual({
       contentType: 'text/turtle',
       allowed: 'GET,PUT',
-      eTag: '"abc"',
+      eTag: '"abc"'
     })
   })
 
   it('fetches content and applies the returned metadata', async () => {
     const response = {
       ok: true,
       headers: {
-        get: jest.fn((name) => {
+        get: vi.fn((name) => {
           if (name === 'content-type') return 'text/turtle'
           if (name === 'allow') return 'GET,PUT'
           if (name === 'etag') return '"abc"'
           return null
-        }),
+        })
       },
-      responseText: '<> a <#Thing>.',
+      responseText: '<> a <#Thing>.'
     }
     const store = {
       fetcher: {
-        webOperation: jest.fn().mockResolvedValue(response),
+        webOperation: vi.fn().mockResolvedValue(response)
       },
-      each: jest.fn(),
-      any: jest.fn(),
-      anyValue: jest.fn(),
-      sym: jest.fn(),
+      each: vi.fn(),
+      any: vi.fn(),
+      anyValue: vi.fn(),
+      sym: vi.fn()
     }
     const subject = { uri: 'https://example.org/profile/card' }
     const sourcePaneState = { broken: false, contentType: undefined, allowed: undefined, eTag: undefined }
@@ -58,14 +60,14 @@ describe('helpers', () => {
       metadata: {
         contentType: 'text/turtle',
         allowed: 'GET,PUT',
-        eTag: '"abc"',
-      },
+        eTag: '"abc"'
+      }
     })
     expect(sourcePaneState).toEqual({
       broken: false,
       contentType: 'text/turtle',
       allowed: 'GET,PUT',
-      eTag: '"abc"',
+      eTag: '"abc"'
     })
   })
 })

test/helpers.test.js

@@ -0,0 +1,50 @@
+import { vi } from 'vitest'
+
+type FetchHandler = (request: Request) => Response | Promise<Response> | Record<string, unknown> | Promise<Record<string, unknown>>
+
+type FetchMockEntry = {
+  pattern: RegExp
+  handler: FetchHandler
+}
+
+const handlers: FetchMockEntry[] = []
+
+function toHeaders (headers: Headers | Record<string, string> | undefined) {
+  if (headers instanceof Headers) return headers
+  return new Headers(headers)
+}
+
+function toResponse (result: Response | Promise<Response> | Record<string, unknown>): Response | Promise<Response> {
+  if (result instanceof Response || result instanceof Promise) {
+    return result
+  }
+
+  const status = typeof result.status === 'number' ? result.status : 200
+  const body = typeof result.body === 'string' ? result.body : ''
+  const headers = toHeaders(result.headers as Record<string, string> | undefined)
+
+  return new Response(body, { status, headers })
+}
+
+export function mockFetchIf (pattern: RegExp, handler: FetchHandler): void {
+  handlers.push({ pattern, handler })
+}
+
+export function enableFetchMocks (): void {
+  vi.stubGlobal('fetch', vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const request = input instanceof Request ? input : new Request(input, init)
+
+    for (const { pattern, handler } of handlers) {
+      if (pattern.test(request.url)) {
+        return toResponse(await handler(request))
+      }
+    }
+
+    return new Response('Not Found', { status: 404 })
+  }))
+}
+
+export function resetFetchMocks (): void {
+  handlers.length = 0
+  vi.unstubAllGlobals()
+}