#171 Source Card Content

babel.config.mjs

@@ -1,8 +1,18 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { resolvePathsUsingDecorators, litDecoratorsBabelOptions } from './config/babel.mjs'
+
+const projectRoot = path.dirname(fileURLToPath(import.meta.url))
+const pathsUsingDecorators = resolvePathsUsingDecorators(projectRoot)
+const isCommonJsBuild = process.env.BABEL_ENV === 'cjs' || process.env.NODE_ENV === 'test'
+
 export default {
   presets: [
+    '@babel/preset-typescript',
     [
       '@babel/preset-env',
       {
+        modules: isCommonJsBuild ? 'commonjs' : false,
         targets: {
           browsers: ['> 1%', 'last 3 versions', 'not dead']
         },
@@ -17,5 +27,11 @@ export default {
         ]
       }
     ]
+  ],
+  overrides: [
+    {
+      include: pathsUsingDecorators,
+      ...litDecoratorsBabelOptions,
+    }
   ]
 }

config/babel.mjs

@@ -0,0 +1,31 @@
+import path from 'path'
+
+/**
+ * This file contains config options for babel using Lit decorators.
+ *
+ * @see https://lit.dev/docs/components/decorators/#using-decorators-with-babel
+ */
+
+const pathsUsingDecorators = ['src/design-system', 'src/primitives', 'src/storybook', 'src/components']
+
+export const litDecoratorsBabelOptions = {
+  assumptions: {
+    setPublicClassFields: true,
+    privateFieldsAsSymbols: true
+  },
+  plugins: [
+    '@babel/plugin-transform-class-static-block',
+    ['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
+    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
+    '@babel/plugin-transform-class-properties'
+  ]
+}
+
+export const litDecoratorsLoaderOptions = {
+  cacheDirectory: true,
+  ...litDecoratorsBabelOptions,
+}
+
+export function resolvePathsUsingDecorators (projectRoot) {
+  return pathsUsingDecorators.map((_path) => path.resolve(projectRoot, _path))
+}

config/postcss.mjs

@@ -0,0 +1,12 @@
+import PostCSS from 'postcss'
+import TailwindCSS from '@tailwindcss/postcss'
+
+const cssProcessor = PostCSS([TailwindCSS()])
+
+export default {
+  async transform (css, { filePath }) {
+    const result = await cssProcessor.process(css, { from: filePath })
+
+    return result.css
+  }
+}

declarations.d.ts

@@ -0,0 +1,7 @@
+declare module '*.styles.css' {
+  import type { CSSResultGroup } from 'lit'
+  const styles: CSSResultGroup
+  export default styles
+}
+
+declare module '*.css';

dev/index.js

@@ -33,8 +33,8 @@ finishLogin()
 
 // const targetURIToShow = "https://timbl.com/timbl/Automation/mother/tracker.n3#mother"
 // const targetURIToShow = 'https://sstratsianis.solidcommunity.net/TestingTracker/index.ttl#this'
-const targetURIToShow = 'https://testingsolidos.solidcommunity.net/profile/card#me'
-
+// const targetURIToShow = 'https://testingsolidos.solidcommunity.net/profile/card#me'
+const targetURIToShow = 'https://sharontest.solidcommunity.net/profile/card#me'
 const context = {
   dom: document,
   session: {

eslint.config.mjs

@@ -1,39 +1,67 @@
 import globals from 'globals'
+import tsParser from '@typescript-eslint/parser'
+import tsPlugin from '@typescript-eslint/eslint-plugin'
+
+const commonGlobals = {
+    ...globals.browser,
+    ...globals.node,
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+}
+
+const commonRules = {
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
+    'no-console': 'warn',
+    'prefer-const': 'error',
+    'no-var': 'error',
+}
 
 export default [
     {
         ignores: [
             'node_modules/**',
-            'coverage/**'
+            'coverage/**',
+            'lib/**'
         ],
     },
     {
         files: ['src/**/*.js'],
         languageOptions: {
             globals: {
-                ...globals.browser,
-                ...globals.node,
-                Atomics: 'readonly',
-                SharedArrayBuffer: 'readonly',
+                ...commonGlobals,
             },
         },
 
         rules: {
-        // Code style - match TypeScript settings
-        semi: ['error', 'never'],
-        quotes: ['error', 'single'],
-
-        // Strict checking - match TypeScript strictness
-        'no-console': 'warn',
-        'no-unused-vars': 'warn', // Match TypeScript noUnusedLocals: true
+        ...commonRules,
+        'no-unused-vars': 'warn',
         'no-undef': 'error',
-        strict: ['error', 'global'], // Match TypeScript alwaysStrict: true
-
-        // Additional strictness to match TypeScript behavior
+        strict: ['error', 'global'],
         'no-implicit-globals': 'error',
-        'prefer-const': 'error', // Encourage immutability
-        'no-var': 'error', // Use let/const only
         'no-redeclare': 'error'
         }
+    },
+    {
+        files: ['src/**/*.ts', '**/*.d.ts'],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                sourceType: 'module',
+            },
+            globals: {
+                ...commonGlobals,
+            },
+        },
+        plugins: {
+            '@typescript-eslint': tsPlugin,
+        },
+        rules: {
+        ...commonRules,
+        'no-unused-vars': 'off',
+        'no-undef': 'off',
+        'no-redeclare': 'off',
+        '@typescript-eslint/no-unused-vars': 'warn'
+        }
     }
-]
+]

jest.config.mjs

@@ -6,7 +6,7 @@ export default {
       customExportConditions: ['node']
   },
   setupFilesAfterEnv: ["./test/helpers/jest.setup.js"],
-  transformIgnorePatterns: ["/node_modules/(?!lit-html).+\\.js"],
+  transformIgnorePatterns: ["/node_modules/(?!(@lit|@lit-labs|lit|lit-html|lit-element)/).+\\.js$"],
   roots: ['<rootDir>/src', '<rootDir>/test'],
   moduleNameMapper: {
     '^SolidLogic$': 'solid-logic',