search

unimal-jp / spear

The spear OSS repository
https://late-cloud-6411.spearly.app
MIT License
10 stars 1 forks source link

[Proposal] Output with debug information #156

Open mantaroh opened 1 year ago

mantaroh commented 1 year ago

What is this ?

This feature is:

If we have the following files:

index.html

<body>
 <main-component></main-component>
</body>

components/main-component.spear

<div>
  <p>This is main component</p>
  <sub-component></sub-component>
</dib>

components/sub-component.spear

<span>sub component</span>

Spear will generate the following file with debug information

<body spear-src="index.html:1">
  <div spear-src="components/main-component.spear:1">
    <p spear-src="components/main-component.spear:2">
    <span spear-src="components/sub-component.spear:1">
   </div>
</body>

Usecase

I guess this feature help the bellow use-cases:

  1. Debug the spear
    • Now, we can't know the original source file from generated file. So this is NOT EASY to debug the Spear.
  2. Compare the source file and edit source from generated file.
    • Imagine the editor which has source and preview pane. We want to source code lines when clicking the preview element.
yoannes commented 1 year ago

@mantaroh san

Also we need to add the CMS's identification in case the user edit some content, for example on this file if the user updates the content of body_article we could trigger an CMS update.

<article class="flex column gap-10" cms-item cms-content-type="article" cms-content="c-xxx">
  <div class="flex gap-8">
    <a class="blog-contentCard" href="#">
      ...
      <div cms-item cms-content-type="article" cms-content="c-xxx" cms-field="article_body">
        Some content
      </div>
    </a>
  </div>
</article>
mantaroh commented 1 year ago

@yoannes

As we talked with, we need to add the CMS's field identifier into generated result like the following:

<div data-spear-content-type="news" data-spear-content="cr-XXXXX">
  <p data-spear-content-field="title">News Title 1</p>
  <p data-spear-content-field="body">This is news content.</p>
</div>

However, embed syntax can be wrote text node like bellow:

<div>
  <p> Title is {%= news_title %} </p>
</div>

In above case, Title is {%= news_title %} is text node of parent <p> element. So we cannot insert data-spear-content-field into this text node.

So we decided that spear wrap the embed syntax by <span> tag like bellow:

<div>
 <p>Title is <span>News title 1</span></p>
</div>
mantaroh commented 1 year ago

As discussed with you, we might drop this debug information when field type is calender and image.
If we inject the debug attribute these field type, the generated HTML will be like the bellow:

<div>
  <img src="<span data-spear-field-type="image">https://www.xxxxx.xxxx/images/abc.png</span>">
</div>

The original source file is the following file:

<div>
  <img src="{%= news_image %}">
</div>

User expect that this syntax might not replace injected debug data string. i.e., expecting url resource string.

So I decided that spear will inject debug information parent element when field type is image and calendar.
Spear ending up generate the following html by using an above sample:

<div>
  <img src="https://xxxxx.xxxx/abc.png" data-spear-field-type="image">
</div>

This is little tricky, however this is the choice which we can inject debug information, I think.

@yoannes How do you think this injecting debug information mechanism of image and calendar type ? 🤔

yoannes commented 1 year ago

@mantaroh It works fine for me. It will be good to search and replace the url when needed 🚀