Is there any chance of getting a way to change the GOOBER_ID

Alternatively just allowing us to point the target directly to a <code class="notransl

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Ability to set GOOBER_ID about goober HOT 5 OPEN

ecustic commented on May 27, 2024

Ability to set GOOBER_ID

from goober.

Comments (5)

ecustic commented on May 27, 2024

Alternatively just allowing us to point the target directly to a style tag would also solve the issue for me.

goober/src/core/get-sheet.js

Lines 11 to 24 in 2b2d422

    
           export let getSheet = (target) => { 
        
               if (typeof window === 'object') { 
        
                   // Querying the existing target for a previously defined <style> tag 
        
                   // We're doing a querySelector because the <head> element doesn't implemented the getElementById api 
        
                   return ( 
        
                       (target ? target.querySelector('#' + GOOBER_ID) : window[GOOBER_ID]) || 
        
                       Object.assign((target || document.head).appendChild(document.createElement('style')), { 
        
                           innerHTML: ' ', 
        
                           id: GOOBER_ID 
        
                       }) 
        
                   ).firstChild; 
        
               } 
        
               return target || ssr;

Maybe adding an early return to the getSheet function here:

 export let getSheet = (target) => { 
     if (typeof window === 'object') { 
        if (target instanceof HTMLStyleElement) {
            return target;
        }
     //...
     }
     //...
}

from goober.

cristianbote commented on May 27, 2024

Hey @ecustic, thanks for opening this issue! Nice topic 😃

Before getting into it just wanted to let you know that I don't have knowledge on the Obsidian inner workings.

About polluting the window, would goober the only one that would be polluting? More precisely I believe most of the UI related frameworks will pollute in a way or another.
Creating goober instances is another way of handling these as well and I've been thinking about it. One of the things that I don't really like is that with instances the import of goober would have to be changed a bit:

// src/utils/styled.js
export const styled = createGoober({
 // here will go the config part
});

// src/components/button.js
import { styled } from 'src/utils/styled';

Now, the question is, is this better? Debatable 😅

from goober.

ecustic commented on May 27, 2024

I think the optimal solution would be to have both.

Export { styled, css, createGoober }. createGoober should return { styled, css }. The module should then internally call createGoober with default config and expose the styled and css it returns. This would allow the API to remain unchanged for the 99% who use goober as it currently is, while still having a single implementation instead of differentiating between instanced and global implementations.

from goober.

ecustic commented on May 27, 2024

About polluting the window, would goober the only one that would be polluting? More precisely I believe most of the UI related frameworks will pollute in a way or another.

This is very true and one of the reasons I chose goober after being frustrated with the tools I normally use: emotion and styled-components. There are some unique limitations when you're developing an app which is going to be plugged-in to a larger codebase and expected to co-exist without any knowledge of what anything else is doing. Out of all the CSS-in-JS frameworks I tested, goober ended up being the easiest to wrangle into doing what I needed. Specifically due to it being bound to a single identifier, which I could find and remove when needed.

To avoid clashes I'm currently using an extremely hacky temporary solution where I've just written a small esbuild plugin to replace the three instances of the string _goober in the resolved goober module to _my_plugin_name_goober.

But in fact there should be no need to use id at all. Replacing the id with a data attribute such as data-goober-id and then having the default value just be 'goober', but let users configure the id, would work just as well but not polute window.

from goober.

wateryoma commented on May 27, 2024

Hello,
since setup call is mandatory - we can optionally pass id to setup

from goober.

Ability to set GOOBER_ID about goober HOT 5 OPEN

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	export let getSheet = (target) => {
	if (typeof window === 'object') {
	// Querying the existing target for a previously defined <style> tag
	// We're doing a querySelector because the <head> element doesn't implemented the getElementById api
	return (
	(target ? target.querySelector('#' + GOOBER_ID) : window[GOOBER_ID]) \|\|
	Object.assign((target \|\| document.head).appendChild(document.createElement('style')), {
	innerHTML: ' ',
	id: GOOBER_ID
	})
	).firstChild;
	}

	return target \|\| ssr;