What environment is Hooks running in?

Elements
1 
  function getEnvironment() {
	if (typeof window !== "undefined" && typeof document !== "undefined") {
	  return "Browser";
	} else if (typeof process !== "undefined" && process.versions && process.versions.node) {
	  return "Node.js";
	} else if (typeof require !== "undefined" && typeof module !== "undefined") {
	  return "CommonJS (Node.js)";
	} else {
	  return "Unknown Environment";
	}
  }
  
  console.log("Running in:", getEnvironment());

Returns “Unknown Environment”

What I’m trying to do in hooks is construct a path to a file in the components site assets directory from the users properties choices (done)

But I need the contents of the file at that path.
.fetch() causes error in hooks.

If I get that far and get the contents of the file, I’ve still to figure out how to only do it once.
I’d hoped I could add a hidden switch in properties, and set its value from hooks to use as a conditional, but the value seems to be read only.

Am I flogging a dead horse on this one?

2

Hook.js is processed only within Elements, and is used for passing data to your component’s template(s).

Have you got more of a concrete example of what you’re trying to do, and maybe we can help with a solution :slight_smile:

3

One use case involved processing Heroicons SVGs in hooks. The Heroicons SVGs were stored in shared site assets and added only once. Users would select an icon from a list in the components properties.
In the hooks, I would build a path to the SVG asset based on the user’s choice.

Everything worked fine, and I was able to test the path by using it as the src of an <img> element in index.html.

However, I wanted the SVG to be inline, re-colorable, and resizable. To achieve that, I needed to fetch the contents of the SVG using the path in the hooks.
Normally, I would use .fetch() in JavaScript to retrieve the SVG content from the path.
Unfortunately, .fetch() generates an error in hooks, citing “unknown variable fetch.”

While this particular use case is relatively trivial, I anticipate many future use cases where access to the contents of a file in a component’s assets will be necessary.

This can all be done on way or another as it stands, if you only want to do the thing (whatever it may be) in the published page, But not for edit mode display.

4

I also touched on a two way street between hooks and components properties.

What I was trying to do there was take Heroicons raw svg code user added to a text area. capture it in hooks. Process it removing the size class, and sending it back to the text area. to update the page.

Like in hooks

raw svg in form prop > process > send it back to prop.
all good apart for updating the value of the prop with processed string.

5

I used the include last time. Thats how I crashed elements. :rofl: