feat: got it working

scalar · May 24, 2024 · 8eb6290 · 8eb6290
1 parent b370259
commit 8eb6290
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 11 deletions.
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -1,6 +1,5 @@
-import '@scalar/api-client/style.css'
 import { ApiReferenceReact } from '@scalar/api-reference-react'
-// import '@scalar/api-reference-react/style.css'
+import '@scalar/api-reference-react/style.css'
 import React from 'react'
 
 function App() {

diff --git a/packages/api-client/src/components/ApiClient/ApiClient.vue b/packages/api-client/src/components/ApiClient/ApiClient.vue
@@ -126,6 +126,11 @@ watch(
 </template>
 
 <style>
+/** Used to check if css is loaded */
+:root {
+  --scalar-loaded-api-client: true;
+}
+
 .scalar-api-client,
 #headlessui-portal-root {
   background: var(--scalar-background-1);

diff --git a/packages/api-client/vite.config.ts b/packages/api-client/vite.config.ts
@@ -30,6 +30,10 @@ export default defineConfig({
          * We need the setTimeout so we can do a quick check to see if the css file has already been loaded
          *
          * @see https://stackoverflow.com/a/68954980/1624255
+         *
+         * TODO make this into a rollup/vite plugin
+         *
+         * copied from api-reference/vite.config
          */
         {
           name: 'autoload-css',
@@ -38,7 +42,6 @@ export default defineConfig({
 
             const {
               ['style.css']: { source: css },
-              ['index.js']: component,
             } = bundle
 
             const IIFEcss = `
@@ -48,7 +51,7 @@ export default defineConfig({
                     return
 
                   setTimeout(() => {
-                    if (getComputedStyle(document.body).getPropertyValue('${STYLE_LOADED_VAR}') === 'true') return console.log('style not loaded')
+                    if (getComputedStyle(document.body).getPropertyValue('${STYLE_LOADED_VAR}') === 'true') return 
 
                     const elementStyle = document.createElement('style')
                     elementStyle.setAttribute('id', '${STYLE_ID}')
@@ -61,6 +64,8 @@ export default defineConfig({
                 }
               })()`
 
+            const component =
+              bundle['index.js'] || bundle['index.cjs'] || bundle['index.mjs']
             if ('code' in component) component.code += IIFEcss
           },
         },

diff --git a/packages/api-reference-react/src/ApiReferenceReact.tsx b/packages/api-reference-react/src/ApiReferenceReact.tsx
@@ -5,8 +5,6 @@ import '@scalar/api-reference/style.css'
 import React, { useEffect, useRef } from 'react'
 import { createApp } from 'vue/dist/vue.esm-bundler.js'
 
-import './style.css'
-
 // These are required for the vue bundler version
 globalThis.__VUE_OPTIONS_API__ = true
 globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = true

diff --git a/packages/api-reference-react/src/style.css b/packages/api-reference-react/src/style.css
diff --git a/packages/api-reference/src/components/ApiReferenceLayout.vue b/packages/api-reference/src/components/ApiReferenceLayout.vue
@@ -332,6 +332,12 @@ useDeprecationWarnings(props.configuration)
   </ResetStyles>
   <ScalarToasts />
 </template>
+<style>
+/** Used to check if css is loaded */
+:root {
+  --scalar-loaded-api-reference: true;
+}
+</style>
 <style scoped>
 /* Configurable Layout Variables */
 .scalar-api-reference {

diff --git a/packages/api-reference/vite.config.ts b/packages/api-reference/vite.config.ts
@@ -1,15 +1,16 @@
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
 import { defineConfig } from 'vitest/config'
 
 import pkg from './package.json'
 
+const STYLE_ID = 'scalar-style-api-reference'
+const STYLE_LOADED_VAR = '--scalar-loaded-api-reference'
+
 export default defineConfig({
   define: {
     'process.env.NODE_ENV': '"production"',
   },
-  // plugins: [vue(), cssInjectedByJsPlugin()],
   plugins: [vue()],
   build: {
     emptyOutDir: true,
@@ -26,6 +27,54 @@ export default defineConfig({
           item.match(/^(?!@scalar\/(?!components\b)).*/),
         ),
       ],
+      plugins: [
+        /**
+         * Automatic css injection via js
+         * We need the setTimeout so we can do a quick check to see if the css file has already been loaded
+         *
+         * @see https://stackoverflow.com/a/68954980/1624255
+         *
+         * TODO make this into a rollup/vite plugin
+         *
+         * copied from client/vite.config
+         */
+        {
+          name: 'autoload-css',
+          generateBundle(_, bundle) {
+            if (!('source' in bundle['style.css'])) return
+
+            const {
+              ['style.css']: { source: css },
+            } = bundle
+
+            const IIFEcss = `
+              (function() {
+                try {
+                  if (typeof document === 'undefined' || document.getElementById('${STYLE_ID}'))
+                    return
+
+                  setTimeout(() => {
+                    if (getComputedStyle(document.body).getPropertyValue('${STYLE_LOADED_VAR}') === 'true') return 
+
+                    const elementStyle = document.createElement('style')
+                    elementStyle.setAttribute('id', '${STYLE_ID}')
+                    elementStyle.appendChild(document.createTextNode(${JSON.stringify(css)}))
+                    document.head.appendChild(elementStyle)
+
+                    console.warn('Auto-loading the css through js has been deprecated. Please import the css directly. Visit https://github.com/scalar/scalar for more info.')
+                  }, 0)
+
+                } catch (error) {
+                  console.error(error, 'unable to concat style inside the bundled file')
+                }
+              })()`
+
+            const component =
+              bundle['index.js'] || bundle['index.cjs'] || bundle['index.mjs']
+            if ('code' in component) component.code += IIFEcss
+          },
+        },
+      ],
     },
   },
   resolve: {