Comments (13)
AllanOricil
commented on May 18, 2024
2
Ohhhhh maybe after adding the colors-module, nuxt generates another html file with a script for configuring the color. And because I did not update my html, im seeing this exception. I will verify this again. One moment.
from color-mode.
AllanOricil
commented on May 18, 2024
2
@Atinux I'm selling the code. I'm leaving my job at the moment because I'm not enjoying and I will need money. So I launched it hoping people would buy licenses or buy the source code.
from color-mode.
Atinux
commented on May 18, 2024
1
No worries! Please ping me when your extension is out with Nuxt under the hood 🙌
from color-mode.
Atinux
commented on May 18, 2024
Actually you need to serve all the files, not only app.js. A script is injected in the header.
What is the purpose of your extension?
from color-mode.
AllanOricil
commented on May 18, 2024
@Atinux I serve a single app.js. I configured webpack to ouput only one .js file to solve another problem related to vscode. Everything works as expected, trust me. It is just this module that I'm having problem with to run from vscode.
from color-mode.
AllanOricil
commented on May 18, 2024
You can see the app in the project I shared with you. The app is inside the web folder
from color-mode.
AllanOricil
commented on May 18, 2024
The extension is to work with salesforce data while coding.
https://marketplace.visualstudio.com/items?itemName=allanoricil.salesforce-soql-editor this is the current version that I wrote using vue js
Now Im launching a webapp built with nuxt that is also connected to vscode to enable "window mode" using PWA
from color-mode.
AllanOricil
commented on May 18, 2024
Here is the app running without any problem from vscode when removing this module.
from color-mode.
Atinux
commented on May 18, 2024
What HTML file to you serve actually? The one generated in dist/ ?
from color-mode.
AllanOricil
commented on May 18, 2024
What HTML file to you serve actually? The one generated in dist/ ?
Yes. But I serve it in memory instead of reading from the file. I just copied the html nuxt generated, added a proces.env to set the app.js version from the cdn. The rest is the same.
this.panel.webview.html = this.prepareView(`<!doctype html><html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D"> <head> <title>salesforce-query-editor</title> <meta data-n-head="1" charset="utf-8"> <meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"> <meta data-n-head="1" data-hid="description" name="description" content=""> <meta data-n-head="1" data-hid="charset" charset="utf-8"> <meta data-n-head="1" data-hid="mobile-web-app-capable" name="mobile-web-app-capable" content="yes"> <meta data-n-head="1" data-hid="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content="Salesforce Query Editor"> <meta data-n-head="1" data-hid="theme-color" name="theme-color" content="#ffffff"> <meta data-n-head="1" data-hid="og:type" name="og:type" property="og:type" content="website"> <meta data-n-head="1" data-hid="og:title" name="og:title" property="og:title" content="Salesforce Query Editor"> <meta data-n-head="1" data-hid="og:site_name" name="og:site_name" property="og:site_name" content="Salesforce Query Editor"> <meta data-n-head="1" data-hid="og:description" name="og:description" property="og:description" content="This Web App helps Salesforce Developers to write Queries."> <link data-n-head="1" data-hid="shortcut-icon" rel="shortcut icon" href="/_nuxt/icons/icon_64x64.72c43d.png"> <link data-n-head="1" data-hid="apple-touch-icon" rel="apple-touch-icon" href="/_nuxt/icons/icon_512x512.72c43d.png" sizes="512x512"> <link data-n-head="1" rel="manifest" href="/_nuxt/manifest.dce3af21.json" data-hid="manifest"> <script data-n-head="1" src="https://js.stripe.com/v3/" crossorigin="anonymous"></script> <script data-n-head="1" data-hid="adsbygoogle-script" async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script data-n-head="1" data-hid="adsbygoogle">window.__abg_called||((window.adsbygoogle=window.adsbygoogle||[]).push({google_ad_client:"ca-pub-2402391224743305",enable_page_level_ads:!1,overlays:{bottom:!1}}),window.__abg_called=!0)</script> <script src="https://cdn.jsdelivr.net/npm/${process.env.PACKAGE_NAME}/dist/_nuxt/app.js"></script></head> <body> <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{}}</script> </body></html>`, htmlPath);
from color-mode.
AllanOricil
commented on May 18, 2024
Yes, that was the reason. After adding the module, nuxt generates another html with this script. Sorry for that
<script data-n-head="1" data-hid="nuxt-color-mode-script" data-pbody="true">!function(){"use strict";var e=window,s=document,o=s.documentElement,a=["dark","light"],t=window.localStorage.getItem("nuxt-color-mode")||"system",c="system"===t?l():t,i=s.body.getAttribute("data-color-mode-forced");function r(e){var s=""+e+"-mode";o.classList?o.classList.add(s):o.className+=" "+s}function n(s){return e.matchMedia("(prefers-color-scheme"+s+")")}function l(){if(e.matchMedia&&"not all"!==n("").media)for(var s of a)if(n(":"+s).matches)return s;return"light"}i&&(c=i),r(c),e["__NUXT_COLOR_MODE__"]={preference:t,value:c,getColorScheme:l,addClass:r,removeClass:function(e){var s=""+e+"-mode";o.classList?o.classList.remove(s):o.className=o.className.replace(new RegExp(s,"g"),"")}}}();
</script>from color-mode.
AllanOricil
commented on May 18, 2024
@Atinux I've launched the extension https://marketplace.visualstudio.com/items?itemName=allanoricil.salesforce-soql-editor
I had a lot of fun to make it work inside vs code
from color-mode.
Atinux
commented on May 18, 2024
Any chance to share with me the source code, I am curious to see how it works :)
from color-mode.
Related Issues (20)
- [BUG] Flashbang 💥 FOUC 🫣
- Not change body class
- More color modes
- SSR - Hydration text mismatch HOT 2
- Throws Error about accessing `preference` of `undefined` HOT 4
- Dark theme cannot be loaded
- allow disabling css transitions while changing color scheme
- Get color-theme while server render
- Forced color mode incorrect timing
- Adding class "theme-red" to <html> breaks color-mode
- Load color-mode already in spa template
- helper.getColorScheme is not a function error when trying to use the module HOT 6
- Can I use only data value?
- Selected Color dosn't save on LocalStorage
- Question about demo asset regarding license HOT 2
- On light mode background-color is transparent HOT 1
- Document how to force color mode dynamically (e.g. from a useFetch response) HOT 4
- Color of element stuck in 1 color.
- Reactive `useColorMode()` value HOT 1
- tailwind module integration breaks dark mode HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from color-mode.