🚀. Socket Launch Week Day 3:Socket Firewall Now Blocks Malicious VS Code and Open VSX Extensions.Learn more →
Sign In

@stagewise-plugins/angular

Package Overview
Dependencies
Maintainers
3
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stagewise-plugins/angular - npm Package Compare versions

Comparing version
0.4.7
 to
0.5.0
+5
-120
dist/index.cjs.js

@@ -1,123 +0,8 @@

"use strict";
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("@stagewise/toolbar/plugin-ui/jsx-runtime");
function AngularLogo() {
return /* @__PURE__ */ jsxRuntime.jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 960 960",
fill: "currentColor",
stroke: "currentColor",
children: [
/* @__PURE__ */ jsxRuntime.jsx("title", { children: "Angular Logo" }),
/* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
/* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "562.6,109.8 804.1,629.5 829.2,233.1 " }),
/* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8 " }),
/* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "384.1,539.3 575.2,539.3 479.6,307 " }),
/* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "396.6,109.8 130,233.1 155.1,629.5 " })
] })
]
}
);
}
let angularWarningShown = false;
function checkAngularAndWarnOnce() {
if (!window.ng && !angularWarningShown) {
console.warn(
"Angular plugin: No Angular instance (window.ng) detected or Angular is not in development mode. Component detection features will not be available."
);
angularWarningShown = true;
}
}
function getAngularComponentHierarchy(element) {
if (!window.ng || !window.ng.getComponent) {
return [];
}
const components = [];
let currentElement = element;
const maxComponents = 3;
while (currentElement && components.length < maxComponents) {
try {
const componentInstance = window.ng.getComponent(currentElement);
if (componentInstance) {
let componentName = componentInstance.constructor.name;
if (componentName.startsWith("_")) {
componentName = componentName.substring(1);
}
if (componentName && componentName !== "Object") {
if (!components.some((c) => c.name === componentName)) {
components.push({ name: componentName });
}
}
}
} catch (e) {
}
if (currentElement.parentElement && currentElement.parentElement !== document.body) {
currentElement = currentElement.parentElement;
} else {
break;
}
}
return components;
}
function getSelectedElementAnnotation(element) {
checkAngularAndWarnOnce();
if (!element) {
return { annotation: null };
}
const hierarchy = getAngularComponentHierarchy(element);
if (hierarchy.length > 0 && hierarchy[0]) {
return {
annotation: `${hierarchy[0].name}`
};
}
return { annotation: null };
}
function getSelectedElementsPrompt(elements) {
checkAngularAndWarnOnce();
if (!elements || elements.length === 0) {
return null;
}
const selectedComponentHierarchies = elements.map(
(e) => getAngularComponentHierarchy(e)
);
if (selectedComponentHierarchies.some((h) => h.length > 0)) {
const content = `This is additional information on the elements that the user selected. Use this information to find the correct element in the codebase.
${selectedComponentHierarchies.map((h, index) => {
const hierarchyString = h.length === 0 ? "No Angular component detected for this element" : `Angular component tree (from closest to farthest, ${h.length} closest element${h.length > 1 ? "s" : ""}): ${h.map((c) => `{name: ${c.name}}`).join(" child of ")}`;
return `
<element index="${index + 1}">
${hierarchyString}
</element>
`;
}).join("")}
`;
return content;
}
return null;
const plugin = {
mainPlugin: "import { jsxs as s, jsx as a } from \"react/jsx-runtime\";\nfunction p() {\n return /* @__PURE__ */ s(\n \"svg\",\n {\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 960 960\",\n fill: \"currentColor\",\n stroke: \"currentColor\",\n children: [\n /* @__PURE__ */ a(\"title\", { children: \"Angular Logo\" }),\n /* @__PURE__ */ s(\"g\", { children: [\n /* @__PURE__ */ a(\"polygon\", { points: \"562.6,109.8 804.1,629.5 829.2,233.1 \t\" }),\n /* @__PURE__ */ a(\"polygon\", { points: \"624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8 \t\" }),\n /* @__PURE__ */ a(\"polygon\", { points: \"384.1,539.3 575.2,539.3 479.6,307 \t\" }),\n /* @__PURE__ */ a(\"polygon\", { points: \"396.6,109.8 130,233.1 155.1,629.5 \t\" })\n ] })\n ]\n }\n );\n}\nlet c = !1;\nfunction u() {\n !window.parent.ng && !c && (console.warn(\n \"Angular plugin: No Angular instance (window.ng) detected or Angular is not in development mode. Component detection features will not be available.\"\n ), c = !0);\n}\nfunction g(t) {\n if (!window.parent.ng || !window.parent.ng.getComponent)\n return [];\n const n = [];\n let e = t;\n const r = 3;\n for (; e && n.length < r; ) {\n try {\n const i = window.parent.ng.getComponent(\n e\n );\n if (i) {\n let o = i.constructor.name;\n o.startsWith(\"_\") && (o = o.substring(1)), o && o !== \"Object\" && (n.some((l) => l.name === o) || n.push({ name: o }));\n }\n } catch {\n }\n if (e.parentElement && e.parentElement !== document.body)\n e = e.parentElement;\n else\n break;\n }\n return n;\n}\nfunction m(t) {\n if (u(), !t)\n return { annotation: null };\n const n = g(t);\n return n.length > 0 && n[0] ? {\n annotation: `${n[0].name}`\n } : { annotation: null };\n}\nfunction d(t) {\n if (u(), !t || t.length === 0)\n return null;\n const n = t.map(\n (e) => g(e)\n );\n return n.some((e) => e.length > 0) ? `This is additional information on the elements that the user selected. Use this information to find the correct element in the codebase.\n\n ${n.map((r, i) => {\n const o = r.length === 0 ? \"No Angular component detected for this element\" : `Angular component tree (from closest to farthest, ${r.length} closest element${r.length > 1 ? \"s\" : \"\"}): ${r.map((l) => `{name: ${l.name}}`).join(\" child of \")}`;\n return `\n<element index=\"${i + 1}\">\n ${o}\n</element>\n `;\n }).join(\"\")}\n ` : null;\n}\nconst h = {\n displayName: \"Angular\",\n description: \"This toolbar adds additional information and metadata for apps using Angular as a UI framework\",\n iconSvg: /* @__PURE__ */ a(p, {}),\n pluginName: \"angular\",\n onContextElementHover: m,\n onContextElementSelect: m,\n onPromptSend: (t) => {\n const n = d(t.contextElements);\n return n ? {\n contextSnippets: [\n {\n promptContextName: \"elements-angular-component-info\",\n content: n\n }\n ]\n } : { contextSnippets: [] };\n }\n};\nexport {\n h as default\n};\n",
loader: true
}
const AngularPlugin = {
displayName: "Angular",
description: "This toolbar adds additional information and metadata for apps using Angular as a UI framework",
iconSvg: /* @__PURE__ */ jsxRuntime.jsx(AngularLogo, {}),
pluginName: "angular",
onContextElementHover: getSelectedElementAnnotation,
onContextElementSelect: getSelectedElementAnnotation,
onPromptSend: (prompt) => {
const content = getSelectedElementsPrompt(prompt.contextElements);
if (!content) {
return { contextSnippets: [] };
}
return {
contextSnippets: [
{
promptContextName: "elements-angular-component-info",
content
}
]
};
}
};
exports.AngularPlugin = AngularPlugin;
exports.default = plugin;
+3
-5
dist/index.d.ts

@@ -1,5 +0,3 @@

import { ToolbarPlugin } from '@stagewise/toolbar';
export declare const AngularPlugin: ToolbarPlugin;
export { }
import type { ToolbarPluginLoader } from '@stagewise/toolbar'
declare const plugin: ToolbarPluginLoader;
export default plugin;
+6
-121
dist/index.es.js

@@ -1,123 +0,8 @@

import { jsxs, jsx } from "@stagewise/toolbar/plugin-ui/jsx-runtime";
function AngularLogo() {
return /* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 960 960",
fill: "currentColor",
stroke: "currentColor",
children: [
/* @__PURE__ */ jsx("title", { children: "Angular Logo" }),
/* @__PURE__ */ jsxs("g", { children: [
/* @__PURE__ */ jsx("polygon", { points: "562.6,109.8 804.1,629.5 829.2,233.1 " }),
/* @__PURE__ */ jsx("polygon", { points: "624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8 " }),
/* @__PURE__ */ jsx("polygon", { points: "384.1,539.3 575.2,539.3 479.6,307 " }),
/* @__PURE__ */ jsx("polygon", { points: "396.6,109.8 130,233.1 155.1,629.5 " })
] })
]
}
);
}
let angularWarningShown = false;
function checkAngularAndWarnOnce() {
if (!window.ng && !angularWarningShown) {
console.warn(
"Angular plugin: No Angular instance (window.ng) detected or Angular is not in development mode. Component detection features will not be available."
);
angularWarningShown = true;
}
}
function getAngularComponentHierarchy(element) {
if (!window.ng || !window.ng.getComponent) {
return [];
}
const components = [];
let currentElement = element;
const maxComponents = 3;
while (currentElement && components.length < maxComponents) {
try {
const componentInstance = window.ng.getComponent(currentElement);
if (componentInstance) {
let componentName = componentInstance.constructor.name;
if (componentName.startsWith("_")) {
componentName = componentName.substring(1);
}
if (componentName && componentName !== "Object") {
if (!components.some((c) => c.name === componentName)) {
components.push({ name: componentName });
}
}
}
} catch (e) {
}
if (currentElement.parentElement && currentElement.parentElement !== document.body) {
currentElement = currentElement.parentElement;
} else {
break;
}
}
return components;
}
function getSelectedElementAnnotation(element) {
checkAngularAndWarnOnce();
if (!element) {
return { annotation: null };
}
const hierarchy = getAngularComponentHierarchy(element);
if (hierarchy.length > 0 && hierarchy[0]) {
return {
annotation: `${hierarchy[0].name}`
};
}
return { annotation: null };
}
function getSelectedElementsPrompt(elements) {
checkAngularAndWarnOnce();
if (!elements || elements.length === 0) {
return null;
}
const selectedComponentHierarchies = elements.map(
(e) => getAngularComponentHierarchy(e)
);
if (selectedComponentHierarchies.some((h) => h.length > 0)) {
const content = `This is additional information on the elements that the user selected. Use this information to find the correct element in the codebase.
'use client'
${selectedComponentHierarchies.map((h, index) => {
const hierarchyString = h.length === 0 ? "No Angular component detected for this element" : `Angular component tree (from closest to farthest, ${h.length} closest element${h.length > 1 ? "s" : ""}): ${h.map((c) => `{name: ${c.name}}`).join(" child of ")}`;
return `
<element index="${index + 1}">
${hierarchyString}
</element>
`;
}).join("")}
`;
return content;
}
return null;
const plugin = {
mainPlugin: "import { jsxs as s, jsx as a } from \"react/jsx-runtime\";\nfunction p() {\n return /* @__PURE__ */ s(\n \"svg\",\n {\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 960 960\",\n fill: \"currentColor\",\n stroke: \"currentColor\",\n children: [\n /* @__PURE__ */ a(\"title\", { children: \"Angular Logo\" }),\n /* @__PURE__ */ s(\"g\", { children: [\n /* @__PURE__ */ a(\"polygon\", { points: \"562.6,109.8 804.1,629.5 829.2,233.1 \t\" }),\n /* @__PURE__ */ a(\"polygon\", { points: \"624.9,655.9 334.3,655.9 297.2,745.8 479.6,849.8 662,745.8 \t\" }),\n /* @__PURE__ */ a(\"polygon\", { points: \"384.1,539.3 575.2,539.3 479.6,307 \t\" }),\n /* @__PURE__ */ a(\"polygon\", { points: \"396.6,109.8 130,233.1 155.1,629.5 \t\" })\n ] })\n ]\n }\n );\n}\nlet c = !1;\nfunction u() {\n !window.parent.ng && !c && (console.warn(\n \"Angular plugin: No Angular instance (window.ng) detected or Angular is not in development mode. Component detection features will not be available.\"\n ), c = !0);\n}\nfunction g(t) {\n if (!window.parent.ng || !window.parent.ng.getComponent)\n return [];\n const n = [];\n let e = t;\n const r = 3;\n for (; e && n.length < r; ) {\n try {\n const i = window.parent.ng.getComponent(\n e\n );\n if (i) {\n let o = i.constructor.name;\n o.startsWith(\"_\") && (o = o.substring(1)), o && o !== \"Object\" && (n.some((l) => l.name === o) || n.push({ name: o }));\n }\n } catch {\n }\n if (e.parentElement && e.parentElement !== document.body)\n e = e.parentElement;\n else\n break;\n }\n return n;\n}\nfunction m(t) {\n if (u(), !t)\n return { annotation: null };\n const n = g(t);\n return n.length > 0 && n[0] ? {\n annotation: `${n[0].name}`\n } : { annotation: null };\n}\nfunction d(t) {\n if (u(), !t || t.length === 0)\n return null;\n const n = t.map(\n (e) => g(e)\n );\n return n.some((e) => e.length > 0) ? `This is additional information on the elements that the user selected. Use this information to find the correct element in the codebase.\n\n ${n.map((r, i) => {\n const o = r.length === 0 ? \"No Angular component detected for this element\" : `Angular component tree (from closest to farthest, ${r.length} closest element${r.length > 1 ? \"s\" : \"\"}): ${r.map((l) => `{name: ${l.name}}`).join(\" child of \")}`;\n return `\n<element index=\"${i + 1}\">\n ${o}\n</element>\n `;\n }).join(\"\")}\n ` : null;\n}\nconst h = {\n displayName: \"Angular\",\n description: \"This toolbar adds additional information and metadata for apps using Angular as a UI framework\",\n iconSvg: /* @__PURE__ */ a(p, {}),\n pluginName: \"angular\",\n onContextElementHover: m,\n onContextElementSelect: m,\n onPromptSend: (t) => {\n const n = d(t.contextElements);\n return n ? {\n contextSnippets: [\n {\n promptContextName: \"elements-angular-component-info\",\n content: n\n }\n ]\n } : { contextSnippets: [] };\n }\n};\nexport {\n h as default\n};\n",
loader: true
}
const AngularPlugin = {
displayName: "Angular",
description: "This toolbar adds additional information and metadata for apps using Angular as a UI framework",
iconSvg: /* @__PURE__ */ jsx(AngularLogo, {}),
pluginName: "angular",
onContextElementHover: getSelectedElementAnnotation,
onContextElementSelect: getSelectedElementAnnotation,
onPromptSend: (prompt) => {
const content = getSelectedElementsPrompt(prompt.contextElements);
if (!content) {
return { contextSnippets: [] };
}
return {
contextSnippets: [
{
promptContextName: "elements-angular-component-info",
content
}
]
};
}
};
export {
AngularPlugin
};
export default plugin;
+9
-11
package.json
{
"name": "@stagewise-plugins/angular",
"version": "0.4.7",
"version": "0.5.0",
"type": "module",

@@ -42,20 +42,18 @@ "keywords": [

"peerDependencies": {
"preact": "^10.20.0",
"@stagewise/toolbar": "0.4.9"
"@stagewise/toolbar": "0.5.0"
},
"dependencies": {},
"devDependencies": {
"preact": "^10.20.0",
"typescript": "~5.8.3",
"vite": "^6.3.5",
"vite-plugin-dts": "^4.5.3",
"@vitejs/plugin-react-swc": "^3.7.0",
"rollup-preserve-directives": "^1.0.0",
"@stagewise/toolbar": "0.4.9"
"react": "^19.1.0",
"react-dom": "^19.1.0",
"@types/react": "^19.1.8",
"@stagewise/toolbar": "0.5.0",
"@stagewise/plugin-builder": "0.5.0"
},
"scripts": {
"clean": "rm -rf .turbo node_modules",
"dev": "tsc -b --watch & vite build --mode development --watch",
"build": "tsc -b && vite build --mode production"
"dev": "tsc -b && tsx build.config.ts development",
"build": "tsc -b && tsx build.config.ts production"
}
}