itmar-block-packages 3.1.1 → 3.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var styledComponents = require('styled-components');
|
|
5
5
|
var server = require('react-dom/server');
|
|
6
6
|
|
|
7
|
+
// 注入済みのクラス名を記憶する（関数の外で定義することで、呼び出し間で共有される）
|
|
8
|
+
const injectedClasses = new Set();
|
|
7
9
|
const styleComponentApply = (StyleComp, blockSelector) => {
|
|
8
10
|
const blocks = document.querySelectorAll(blockSelector);
|
|
9
11
|
blocks.forEach((el) => {
|
|
@@ -20,14 +22,23 @@ const styleComponentApply = (StyleComp, blockSelector) => {
|
|
|
20
22
|
const classMatch = html.match(/class="([^"]+)"/);
|
|
21
23
|
const className = classMatch ? classMatch[1] : "";
|
|
22
24
|
// ----------------------------------
|
|
23
|
-
// 1. スタイルタグを <head> または要素の直前に注入
|
|
24
|
-
const styleContainer = document.createElement("div");
|
|
25
|
-
styleContainer.innerHTML = styleTags;
|
|
26
|
-
document.head.appendChild(styleContainer.firstChild);
|
|
27
|
-
// 2. クラス名を適用する対象を探す
|
|
28
|
-
// save.tsx で <div className="itmar-wrap"> のように目印をつけておくと確実です
|
|
29
|
-
const target = el.querySelector(".itmar-wrap") || el;
|
|
30
25
|
if (className) {
|
|
26
|
+
console.log(`${className} : ${injectedClasses.has(className)}`);
|
|
27
|
+
// 3. 【重要】このクラス名がまだ注入されていなければ実行
|
|
28
|
+
if (!injectedClasses.has(className)) {
|
|
29
|
+
// 1. スタイルタグを <head> または要素の直前に注入
|
|
30
|
+
const styleContainer = document.createElement("div");
|
|
31
|
+
styleContainer.innerHTML = styleTags;
|
|
32
|
+
const styleElement = styleContainer.firstChild;
|
|
33
|
+
if (styleElement instanceof Node) {
|
|
34
|
+
document.head.appendChild(styleElement);
|
|
35
|
+
// 注入済みとして記録
|
|
36
|
+
injectedClasses.add(className);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
// 2. クラス名を適用する対象を探す
|
|
40
|
+
// save.tsx で <div className="itmar-wrap"> のように目印をつけておくと確実です
|
|
41
|
+
const target = el.querySelector(".itmar-wrap") || el;
|
|
31
42
|
target.classList.add(...className.split(" "));
|
|
32
43
|
}
|
|
33
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleComponentApply.js","sources":["../../src/styleComponentApply.tsx"],"sourcesContent":[null],"names":["ServerStyleSheet","renderToString","_jsx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"styleComponentApply.js","sources":["../../src/styleComponentApply.tsx"],"sourcesContent":[null],"names":["ServerStyleSheet","renderToString","_jsx"],"mappings":";;;;;;AAGA;AACA,MAAM,eAAe,GAAG,IAAI,GAAG,EAAU;MAE5B,mBAAmB,GAAG,CACjC,SAA6E,EAC7E,aAAqB,KACnB;IACF,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,aAAa,CAAC;AACvD,IAAA,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;QACpB,MAAM,QAAQ,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC;AACnD,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,IAAI;YACF,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAM;;AAG5C,YAAA,MAAM,KAAK,GAAG,IAAIA,iCAAgB,EAAE;AACpC,YAAA,MAAM,IAAI,GAAGC,qBAAc,CACzB,KAAK,CAAC,aAAa,CAACC,cAAA,CAAC,SAAS,IAAC,UAAU,EAAE,UAAU,EAAA,CAAI,CAAC,CAC3D;AACD,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,EAAE;;YAGtC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;AAChD,YAAA,MAAM,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE;;YAEjD,IAAI,SAAS,EAAE;AACb,gBAAA,OAAO,CAAC,GAAG,CAAC,CAAA,EAAG,SAAS,CAAA,GAAA,EAAM,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA,CAAE,CAAC;;gBAE/D,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;;oBAEnC,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACpD,oBAAA,cAAc,CAAC,SAAS,GAAG,SAAS;AAEpC,oBAAA,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU;AAC9C,oBAAA,IAAI,YAAY,YAAY,IAAI,EAAE;AAChC,wBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;;AAEvC,wBAAA,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC;oBAChC;gBACF;;;gBAIA,MAAM,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE;AACpD,gBAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC/C;QACF;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,CAAC,CAAC;QAC7C;AACF,IAAA,CAAC,CAAC;AACJ;;;;"}
|
|
@@ -2,6 +2,8 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { ServerStyleSheet } from 'styled-components';
|
|
3
3
|
import { renderToString } from 'react-dom/server';
|
|
4
4
|
|
|
5
|
+
// 注入済みのクラス名を記憶する（関数の外で定義することで、呼び出し間で共有される）
|
|
6
|
+
const injectedClasses = new Set();
|
|
5
7
|
const styleComponentApply = (StyleComp, blockSelector) => {
|
|
6
8
|
const blocks = document.querySelectorAll(blockSelector);
|
|
7
9
|
blocks.forEach((el) => {
|
|
@@ -18,14 +20,23 @@ const styleComponentApply = (StyleComp, blockSelector) => {
|
|
|
18
20
|
const classMatch = html.match(/class="([^"]+)"/);
|
|
19
21
|
const className = classMatch ? classMatch[1] : "";
|
|
20
22
|
// ----------------------------------
|
|
21
|
-
// 1. スタイルタグを <head> または要素の直前に注入
|
|
22
|
-
const styleContainer = document.createElement("div");
|
|
23
|
-
styleContainer.innerHTML = styleTags;
|
|
24
|
-
document.head.appendChild(styleContainer.firstChild);
|
|
25
|
-
// 2. クラス名を適用する対象を探す
|
|
26
|
-
// save.tsx で <div className="itmar-wrap"> のように目印をつけておくと確実です
|
|
27
|
-
const target = el.querySelector(".itmar-wrap") || el;
|
|
28
23
|
if (className) {
|
|
24
|
+
console.log(`${className} : ${injectedClasses.has(className)}`);
|
|
25
|
+
// 3. 【重要】このクラス名がまだ注入されていなければ実行
|
|
26
|
+
if (!injectedClasses.has(className)) {
|
|
27
|
+
// 1. スタイルタグを <head> または要素の直前に注入
|
|
28
|
+
const styleContainer = document.createElement("div");
|
|
29
|
+
styleContainer.innerHTML = styleTags;
|
|
30
|
+
const styleElement = styleContainer.firstChild;
|
|
31
|
+
if (styleElement instanceof Node) {
|
|
32
|
+
document.head.appendChild(styleElement);
|
|
33
|
+
// 注入済みとして記録
|
|
34
|
+
injectedClasses.add(className);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
// 2. クラス名を適用する対象を探す
|
|
38
|
+
// save.tsx で <div className="itmar-wrap"> のように目印をつけておくと確実です
|
|
39
|
+
const target = el.querySelector(".itmar-wrap") || el;
|
|
29
40
|
target.classList.add(...className.split(" "));
|
|
30
41
|
}
|
|
31
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styleComponentApply.js","sources":["../../src/styleComponentApply.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"styleComponentApply.js","sources":["../../src/styleComponentApply.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAGA;AACA,MAAM,eAAe,GAAG,IAAI,GAAG,EAAU;MAE5B,mBAAmB,GAAG,CACjC,SAA6E,EAC7E,aAAqB,KACnB;IACF,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,aAAa,CAAC;AACvD,IAAA,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAI;QACpB,MAAM,QAAQ,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC;AACnD,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,IAAI;YACF,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAM;;AAG5C,YAAA,MAAM,KAAK,GAAG,IAAI,gBAAgB,EAAE;AACpC,YAAA,MAAM,IAAI,GAAG,cAAc,CACzB,KAAK,CAAC,aAAa,CAACA,GAAA,CAAC,SAAS,IAAC,UAAU,EAAE,UAAU,EAAA,CAAI,CAAC,CAC3D;AACD,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,YAAY,EAAE;;YAGtC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;AAChD,YAAA,MAAM,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE;;YAEjD,IAAI,SAAS,EAAE;AACb,gBAAA,OAAO,CAAC,GAAG,CAAC,CAAA,EAAG,SAAS,CAAA,GAAA,EAAM,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA,CAAE,CAAC;;gBAE/D,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;;oBAEnC,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACpD,oBAAA,cAAc,CAAC,SAAS,GAAG,SAAS;AAEpC,oBAAA,MAAM,YAAY,GAAG,cAAc,CAAC,UAAU;AAC9C,oBAAA,IAAI,YAAY,YAAY,IAAI,EAAE;AAChC,wBAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;;AAEvC,wBAAA,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC;oBAChC;gBACF;;;gBAIA,MAAM,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,EAAE;AACpD,gBAAA,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC/C;QACF;QAAE,OAAO,CAAC,EAAE;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,CAAC,CAAC;QAC7C;AACF,IAAA,CAAC,CAAC;AACJ;;;;"}
|
package/package.json
CHANGED