contenteditableのカスタムエレメント版 の修正も大方終わった。
気がするけど、見る度に手直ししている。（大笑
‘”.*?”‘では、リテラル中のバッククォートを処理できない。なので、JDOCやコメント部はリテラルとと一緒に処理し、その他は字句解析し直すことにした。※convertJavascriptToHTML１～２
javascriptでは、'”(\\\\.|.)*??”‘がエラるが、'”(\\\\.|.)*?”‘なら通るので、matchの戻り値[0]のテキストを使い括弧で括ってないパターンの部分も取れる。※convertJavascriptToHTML3
多分これで大丈夫。（でも心配だから、１～２も残しておく。
JDOCも変になっていた。最後の字句解析で行ごとにspanで括る様にしたので再帰したりすると変更漏れ
ちょっと修正すると動作がガタガタになりやっと安定すると行番号の幅が変に狭いので見てみるとVisualStudioCode？？が謎に｝を追加しててcssが効かなくなってたりするのは比較的解りやすいけど…
`.code>.row2 {
margin-left: 1.5rem;
} ☚❓
}\n`,
`.code>.row3 {
margin-left: 2rem;
} ☚❓
}\n`,そのガタガタ動作を追っていった最中に気が付いたコトをメモっておく。
staticな初期設定あるいはthisの話
class Sample {
styles={};
constructor(){
this.styles['one'] = 1;
this.styles['two'] = 2;
this.styles['three'] = 3;
}
}は上手く動作するけど、staticにすると
class Sample {
static _ = Sample.setup();
static styles={};
Sample.setup(){
Sample.styles['one'] = 1;
Sample.styles['two'] = 2;
Sample.styles['three'] = 3;
}
}と初期設定をした後に
static styles={};が動き出す場合があるので、
class Sample {
static _ = Sample.setup();
static styles;
Sample.setup(){
if(!Sample.styles) { Sample.styles={}; }
Sample.styles['one'] = 1;
Sample.styles['two'] = 2;
Sample.styles['three'] = 3;
}
}の様に各static要素の初期設定順に依存しないようにした方がいい。
また、
class Sample {
static _ = Sample.setup();
static setup() {
Sample.field1 = 10;
}
static field1;とクラス名のトコにthisに変えてもstatic同士なら支障は無い。
class Sample {
static _ = this.setup();
static setup() {
this.field1 = 10;
}
static field1;がインスタンスを得た時点でthis経由でstaticなものは見えないので動きが変になりやすい。
更にサブクラスからSample.setup()の様に呼び出されると
class Sample {
static _ = this.setup();
static setup() {
this.field1 = 10;
}
static field1;
class SubSample extends Sample{
static _ = Sample.setup();
サブクラス側にstaticなfield1が出来てしまう様だ。
コレクション型フィールドのgetterの戻り値を使いまわす場合
一番悩ましいのはコレ。
class Sample {
styles={};
constructor(){
this.styles['one'] = 1;
this.styles['two'] = 2;
this.styles['three'] = 3;
}
getStyles() { return this.styles; }
}
・・・
class SubSample extends Sample {
・・・
const styles = this.getStyles();
{
styles['four'] = 4;
{
styles['five'] = 5;
{
styles['six'] = 6;
・・・
{
styles['ten'] = 10;
※もうこのあたりまでくるとthis.getStyles();との距離がかなり離れてしまい
this.stylesに更新した内容（=4のあたりから=10まで）が反映されない時がある。単にソースが長くなってくると起きることがあるので、
class Sample {
styles={};
constructor(){
this.styles['one'] = 1;
this.styles['two'] = 2;
this.styles['three'] = 3;
}
getStyles() { return this.styles; }
}
・・・
class SubSample extends Sample {
・・・
const list = {
'four': 4,
'five': 5,
'six': 6,
・・・
'hundred': 100,
};な感じで
const styles = this.getStyles();
Object.keys(list).forEach((key) => styles[key] = list[key]);とできるダケ「this.getStyles()」を近づけて逃げるよりも
Object.keys(list).forEach((key) => this.styles[key] = list[key]);this.stylesに直接入れるか、処理の戻り値でthis.stylesを上書きしてしまった方が良い。
class Sample {
styles={};
constructor(){
this.styles['one'] = 1;
this.styles['two'] = 2;
this.styles['three'] = 3;
}
setStyles(v) { this.styles = v; }
getStyles() { return this.styles; }
・・・・
method() {
・・・・
const styles = this.getStyles();
・・・・
this.setStyles(styles);
}
}