[Mightbe a Bug report] X-fill doesn't support secondary dynamic attributes

Question

[Mightbe a Bug report] X-fill doesn't support secondary dynamic attributes

Closed this issue a year ago · 8 comments

Hello, after studying and using ofa.js, it's a great framework, but still have something confusing, so I listed below:

~~X-fill doesn't support secondary dynamic attributes~~ ( solved, use attr:name )
Old projects migrate to ofa have global style repeated importing issue
clipboard can't work on ofa.js

First one is solved :) please jump to 2nd and 3rd.

So I start with the title issue first:
When using x-fill, the sub element can't have dynamic attr like vue does,
for example:

<template component>
  <style>
    .item {
      border: #aaa solid 1px;
      padding: 5px;
      margin: 5px;
    }
  </style>
  <button on:click="count++">Count++</button>
  <x-fill :value="arr">
    <div :name="data" :class="$data" :id="data">$index : {{$index}}; $data : {{$data}};  count:{{$host.count}} </div>
  </x-fill>

  <script>
    export default {
      data: {
        count: 0,
        arr: ["I am A", "I am B", "I am C"],
      },
    };
  </script>
</template>

You can see, no matter how I use it, attributes are always null,

in vue, we can just startwith a :+name, just as ofa.js doc mentioned, but obviously, not working here.
It's also might be my misuse, if that so, please point out, thanks.

Then, about old project using ofa.js,

I see it's shadow-nodes, so the toppest node stylesheet can't be applied to the o-page or o-app inside of that.
But I see the layout section split the nav and body, if stylesheet can't be applied in layout section, what's the point of layout, sorry if it was a stupid question, I know what layout does, but I don't see how stylesheet repeatedly imported again and again, there must be some common sections.

I tried to add stylesheet in layout, but it's not applied to the sub components, I see parent are actually loaded before, but it still has shadow-nodes

last, clipboard won't work on ofa.js no matter how I tried, like in top html or inside components.
Nothing happens

https://www.npmjs.com/package/clipboard

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);

  e.clearSelection();
});

clipboard.on('error', function (e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});

// or like this
/*
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
*/

Could you please help me understand what's wrong with my usage and how to make it corret?

Thank you for your time and contributions!

kirakiray commented a year ago

#97

Answer 1 · 2023-11-20T06:22:41.000Z

Thank you for your message.

Regarding the layout you mentioned, is it referring to the layout on the ofa.js official website? I can briefly introduce what the layout on the official website is.

Strictly speaking, it's not a traditional layout but more like nested routing, similar to React nested routes. I find defining nested routes separately cumbersome, so I placed the operation of nested routes on the page module rather than directly binding it to the browser address bar. This is done to prepare for running multiple instances of o-app on a single page in the future.

If you are referring to the situation where styles are not taking effect inside components or pages after globally referencing common layout styles, you can re-reference the styles using the link tag within the template. This won't result in duplicate downloads, as the style file will be downloaded only once.

<template page>
    <link rel="stylesheet" href="./public-layout.css" />
    ...
</template>

Alternatively, you can encapsulate it into a layout component for public use.

To modify the styles of child components, you need to define the part attribute, which involves knowledge of Web Components.

::part()

If you want to modify the styles of multi-level child elements inside a component's slot, you can use inject-host.

For the selector on the clipboard button, it is used globally and cannot access elements inside the shadow DOM. You can point to elements inside the shadow DOM in the configuration.

<!-- test-copy.html -->
<template component>
  <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
  <button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard" />
  </button>

  <script>
    export default {
      tag: "test-copy",
      ready() {
        // var clipboard = new ClipboardJS(".btn");
        var clipboard = new ClipboardJS(this.shadow.$(".btn").ele, {
          target: (trigger) => {
            return this.shadow.$("#foo").ele;
          },
        });

        clipboard.on("success", function (e) {
          console.info("Action:", e.action);
          console.info("Text:", e.text);
          console.info("Trigger:", e.trigger);

          e.clearSelection();
        });

        clipboard.on("error", function (e) {
          console.error("Action:", e.action);
          console.error("Trigger:", e.trigger);
        });
      },
    };
  </script>
</template>

<!-- demo.html -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<l-m src="./test-copy.html"></l-m>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.js"></script>
<test-copy></test-copy>

As the ecosystem is not yet perfect, using clipboard.js is necessary. In the future, there may be more convenient copy plugins, such as the one I quickly wrote. If you are interested, you can modify it yourself.

<template component>
  <div>
    <slot></slot>
  </div>
  <button on:click="clickCopy">{{content}}</button>
  <script>
    export default {
      tag: "copy-area",
      data: {
        content: "Copy",
      },
      proto: {
        clickCopy() {
          var textToCopy = this.text;

          var tempTextArea = document.createElement("textarea");
          Object.assign(tempTextArea.style, {
            position: "absolute",
            width: 0,
            height: 0,
            overflow: "hidden",
          });
          tempTextArea.value = textToCopy;
          document.body.appendChild(tempTextArea);

          tempTextArea.select();
          document.execCommand("copy");
          document.body.removeChild(tempTextArea);

          this.content = "Succeed";

          setTimeout(() => {
            this.content = "Copy";
          }, 1000);
        },
      },
    };
  </script>
</template>

<!-- demo.html -->
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<l-m src="./copy-area.html"></l-m>
<copy-area> Content to be copied !!!</copy-area>

Answer 2 · 2023-11-20T12:39:40.000Z

Thank you for your message.

Regarding the layout you mentioned, is it referring to the layout on the ofa.js official website? I can briefly introduce what the layout on the official website is.

Strictly speaking, it's not a traditional layout but more like nested routing, similar to React nested routes. I find defining nested routes separately cumbersome, so I placed the operation of nested routes on the page module rather than directly binding it to the browser address bar. This is done to prepare for running multiple instances of o-app on a single page in the future.

If you are referring to the situation where styles are not taking effect inside components or pages after globally referencing common layout styles, you can re-reference the styles using the link tag within the template. This won't result in duplicate downloads, as the style file will be downloaded only once.
<template page>
    <link rel="stylesheet" href="./public-layout.css" />
    ...
</template>
Alternatively, you can encapsulate it into a layout component for public use.

To modify the styles of child components, you need to define the part attribute, which involves knowledge of Web Components.

::part()

If you want to modify the styles of multi-level child elements inside a component's slot, you can use inject-host.

For the selector on the clipboard button, it is used globally and cannot access elements inside the shadow DOM. You can point to elements inside the shadow DOM in the configuration.

<template component>
  <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
  <button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard" />
  </button>

  <script>
    export default {
      tag: "test-copy",
      ready() {
        // var clipboard = new ClipboardJS(".btn");
        var clipboard = new ClipboardJS(this.shadow.$(".btn").ele, {
          target: (trigger) => {
            return this.shadow.$("#foo").ele;
          },
        });

        clipboard.on("success", function (e) {
          console.info("Action:", e.action);
          console.info("Text:", e.text);
          console.info("Trigger:", e.trigger);

          e.clearSelection();
        });

        clipboard.on("error", function (e) {
          console.error("Action:", e.action);
          console.error("Trigger:", e.trigger);
        });
      },
    };
  </script>
</template>

<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<l-m src="./test-copy.html"></l-m>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.js"></script>
<test-copy></test-copy>
As the ecosystem is not yet perfect, using clipboard.js is necessary. In the future, there may be more convenient copy plugins, such as the one I quickly wrote. If you are interested, you can modify it yourself.
<template component>
  <div>
    <slot></slot>
  </div>
  <button on:click="clickCopy">{{content}}</button>
  <script>
    export default {
      tag: "copy-area",
      data: {
        content: "Copy",
      },
      proto: {
        clickCopy() {
          var textToCopy = this.text;

          var tempTextArea = document.createElement("textarea");
          Object.assign(tempTextArea.style, {
            position: "absolute",
            width: 0,
            height: 0,
            overflow: "hidden",
          });
          tempTextArea.value = textToCopy;
          document.body.appendChild(tempTextArea);

          tempTextArea.select();
          document.execCommand("copy");
          document.body.removeChild(tempTextArea);

          this.content = "Succeed";

          setTimeout(() => {
            this.content = "Copy";
          }, 1000);
        },
      },
    };
  </script>
</template>

<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js/dist/ofa.min.js"></script>
<l-m src="./copy-area.html"></l-m>
<copy-area> Content to be copied !!!</copy-area>

Hi, thanks for your reply.

I managed to able make a clipboard component as you did.

There is another question about router, do router support alias instead of o-page path, it's more clear and elegant,

as for layout, I think it might better use a new UI framework or ofajs's ecosystem's work, will UI have a new website for introducing that?

Thank you again.

Answer 3 · 2023-11-20T15:14:39.000Z

Hi, thanks for your reply.

I managed to able make a clipboard component as you did.

There is another question about router, do router support alias instead of o-page path, it's more clear and elegant,

as for layout, I think it might better use a new UI framework or ofajs's ecosystem's work, will UI have a new website for introducing that?

Thank you again.

Currently, o-page does not support path aliases, but it's a great feature that I will add later.

Regarding the layout, the UI framework based on ofa.js is currently under preparation and has made progress of about 20% completion. Once development is finished, I will notify you.

Answer 4 · 2023-11-21T11:09:41.000Z

@Devoperman

Hey bro, support for aliases is now available for the page module you need. Just update the version of ofa.js to 4.3.36.
Update link:

https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.3.36/dist/ofa.min.js

Cross-domain page modules are not supported for the time being due to security issues.

You can find testing and usage examples at the following link:

https://github.com/kirakiray/ofa.js/tree/main/test/cases/alias-page

Answer 5 · 2023-11-22T06:42:23.000Z

@Devoperman

Hey bro, support for aliases is now available for the page module you need. Just update the version of ofa.js to 4.3.36. Update link:

https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.3.36/dist/ofa.min.js

Cross-domain page modules are not supported for the time being due to security issues.

You can find testing and usage examples at the following link:

https://github.com/kirakiray/ofa.js/tree/main/test/cases/alias-page

Thank you for your work,
I've noticed the PR, you're very efficiency, I am trying this new feature now, and it's perfectly working now.

Answer 6 · 2023-11-22T06:42:56.000Z

About UI and framework, how can we contribute to the project? It will be nicer to point out how can we do for ofa.js, I am not qualified enough for make significance contribution to ofa.js but I will see what we can do in the furture.
Thanks.

Answer 7 · 2023-11-22T09:28:32.000Z

About UI and framework, how can we contribute to the project? It will be nicer to point out how can we do for ofa.js, I am not qualified enough for make significance contribution to ofa.js but I will see what we can do in the furture. Thanks.

Thank you for your attention. I have learned that two partners are currently developing a UI framework based on ofa.js, but they have not yet disclosed the repository address. Meanwhile, our official team is also working on a framework called PunchUI. Currently, there are only two developers, so progress may be a bit slow. We also have some plans that have not been initiated.

The ofa.js is just getting started and is mainly spreading among developers in China. We hope to promote it in other countries, sparking the interest of like-minded individuals to collectively build this ecosystem. However, due to current resource limitations (lack of time, and personal English proficiency to be improved), we are unable to invest more effort into further promotion. Would you be able to help us introduce this framework to people around you?

Once again, thank you for your support.