implement PR suggestions

Author: SharonStrats

src/components/source-provider/SourceProvider.ts

@@ -5,7 +5,7 @@ import { NamedNode } from 'rdflib'
 import { DataBrowserContext } from 'pane-registry'
 import { renderHeader } from '../../Header'
 import { getStatusSection } from '../../StatusSection'
-import WebComponent from '../../primitives/WebComponent'
+import { WebComponent } from 'solid-ui'
 import { sourceContext, SourceContext } from '../../primitives/context'
 import { SourcePaneState } from '../../types'
 

src/components/sourceEditorCard/SourceEditorCard.ts

@@ -6,7 +6,7 @@ import { NamedNode, parse, serialize } from 'rdflib'
 import type { SourceEditor } from './SourceEditor'
 import { applyResponseHeaders, checkSyntax, fetchContentAndMetadata, getResponseHeaders, happy } from '../../helpers'
 import styles from './SourceEditorCard.styles.css'
-import WebComponent from '../../primitives/WebComponent'
+import { WebComponent } from 'solid-ui'
 import { getStatusSection } from '../../StatusSection'
 import { SourceContext } from '../../primitives/context'
 import { sourceContext } from '../../primitives/context'
@@ -26,9 +26,13 @@ export default class SourceEditorCard extends WebComponent {
   private _editorMount = createRef<HTMLDivElement>()
 
   @consume({ context: sourceContext, subscribe: true })
-  accessor sourceContext!: SourceContext
+  accessor sourceContext: SourceContext = undefined as unknown as SourceContext
+
+  private _requireSourceContext () {
+    if (!this.sourceContext) {
+      throw new Error('The element is missing the required `sourceContext` property.')
+    }
 
-  private _getSourceContext () {
     return this.sourceContext
   }
 
@@ -74,7 +78,7 @@ export default class SourceEditorCard extends WebComponent {
   private async _initializeEditor () {
     if (this._editor) return
     const sourcePaneEditor = this._editorMount.value
-    const sourceContext = this._getSourceContext()
+    const sourceContext = this.sourceContext
     if (!sourcePaneEditor || !sourceContext) {
       return
     }
@@ -120,8 +124,7 @@ export default class SourceEditorCard extends WebComponent {
   }
 
   private saveBack = async () => {
-    const sourceContext = this.sourceContext
-    if (!sourceContext) return
+    const sourceContext = this._requireSourceContext()
 
     const store = sourceContext.context.session.store
     const subject = new NamedNode(sourceContext.subject)
@@ -156,8 +159,7 @@ export default class SourceEditorCard extends WebComponent {
   }
 
   private prettyHandler = () => {
-    const sourceContext = this.sourceContext
-    if (!sourceContext) return
+    const sourceContext = this._requireSourceContext()
 
     const { contentType } = sourceContext.sourcePaneState
     const compactContentType = contentType?.split(';')[0]
@@ -181,16 +183,17 @@ export default class SourceEditorCard extends WebComponent {
   }
 
   render() {
+    const sourceContext = this._requireSourceContext()
     const sectionClass = this._editorReady ? 'sourcePaneCard' : 'sourcePaneCard sourcePaneCardLoading'
-    const compactContentType = this.sourceContext?.sourcePaneState.contentType?.split(';')[0]
+    const compactContentType = sourceContext.sourcePaneState.contentType?.split(';')[0]
     const showPrettyButton = !this._editingState && !!compactContentType && compactable[compactContentType]
     const prettyButton = showPrettyButton
       ? html`
           <solid-ui-button class="sourcePanePrettyButton" variant="secondary" @click=${this.prettyHandler}>Prettify</solid-ui-button>
         `
       : html``
 
-    return this._getSourceContext() ? html`
+    return html`
       <section class=${sectionClass}>
         <div class="sourcePaneEditor" ${ref(this._editorMount)}></div>
         <div class="sourcePaneEditorFooter">
@@ -202,6 +205,6 @@ export default class SourceEditorCard extends WebComponent {
             : prettyButton}
         </div>
       </section>
-    ` : html``
+    `
   }
 }

src/helpers.ts

@@ -10,11 +10,8 @@ const parseable: Record<string, boolean> = {
   'application/rdf+xml': true,
   'application/xhtml+xml': true, // For RDFa?
   'text/html': true, // For data island
-  //        'application/sparql-update': true,
   'application/json': true,
   'application/ld+json': true
-  //        'application/nquads' : true,
-  //        'application/n-quads' : true
 }
 
 export function happy (response: Response, method: string) {
@@ -141,7 +138,6 @@ export function applyResponseHeaders (sourcePaneState: SourcePaneState, metadata
   sourcePaneState.eTag = metadata.eTag
 }
 
-// get response headers
 export function getResponseHeaders (store: LiveStore, subject: NamedNode, response: Response): HttpResourceMetadata {
   let contentType: string | undefined
   let allowed: string | undefined

src/primitives/WebComponent.ts

@@ -3,7 +3,7 @@
     /* Basic Options */
     "target": "ES2019" /* Specify ECMAScript target version - matches your browser support */,
     "module": "ESNext" /* Let bundlers handle module transformation for better tree-shaking */,
-    "moduleResolution": "node", /* Use bundler-aware module resolution for modern Webpack builds. */
+    "moduleResolution": "bundler", /* Use bundler-aware module resolution for modern Webpack builds. */
     /* Crucial for library compatibility: */
     "skipLibCheck": true, // Skip type checking of declaration files for faster builds
     "allowSyntheticDefaultImports": true, // Often helps with ESM interop
@@ -56,11 +56,6 @@
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    "typeRoots": [
-      "node_modules/@types",
-       "declarations.d.ts"
-    ] /* List of folders to include type definitions from. */,
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */