GithubHelp home page GithubHelp logo

lomacar / ewok Goto Github PK

View Code? Open in Web Editor NEW
11.0 11.0 0.0 130 KB

An Alpine-compatible micro-framework based on native web components.

HTML 65.23% JavaScript 34.77%
alpinejs component custom-elements template

ewok's People

Contributors

lomacar avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

ewok's Issues

Alpine @click not working inside shadow root

Hi @bubnenkoff, thanks for checking out Ewok! Yes, you were running into some Alpine-specific issues. You were also not doing things in the best way. Here is a simpler example that achieves what you want in a proper Alpine way.

I did realize with this test that the template has to be noshadow because @click doesn't seem to work otherwise. Not sure why and that is something I will want to fix.

<template id="top-menu" noshadow>
    <script>
      Alpine.data('activePage', () => ({
          activePage: '',
      }))
    </script>
    <nav class="wrap" >
        <div class="tabs right-align" x-data="activePage">
            <a id="home" @click="activePage=$el.id;" :class="activePage==$el.id && 'active' ">Главная</a>
            <a id="search" @click="activePage=$el.id" :class="activePage==$el.id && 'active' ">Поиск</a>
            <a id="docs" @click="activePage=$el.id" :class="activePage==$el.id && 'active' ">Документация</a>
            <a id="price" @click="activePage=$el.id" :class="activePage==$el.id && 'active' ">Цены</a>
        </div>
    </nav>
</template>
  
<top-menu></top-menu>

Originally posted by @Lomacar in #1 (comment)

SyntaxError: Unexpected token 'export'

I am continue experiments with Ewok:

<script>
  export function addRegionIdToSelected(id) {
      console.log("addRegionIdToSelected");    
  }
</script>
  
  <template id="regions-component" noshadow>
    <div>
      <label class="checkbox">
          <input type="checkbox"  onclick="this.props.addRegionIdToSelected(1)">
          
      </label>
    </div>

  </template>

error:

Uncaught SyntaxError: Unexpected token 'export'

Can't change class in component

Hi! And thanks for work!
I decided to try Ewok.

I am trying to create component that show witch item are currenlty active:

I created index.html with follow code:

<script>
 globalThis.listOfAllPages = {"home":true, "price": false, "docs": false, "search": false }
</script>

And Ewok component:

<template id="top-menu" noshadow>

    <script shared>
     export function changeCurrentSelectedPage(currentActivePageName) {
         console.log(currentActivePageName);
            for (const [key, value] of Object.entries(listOfAllPages)) {
                globalThis.listOfAllPages[key] = false;
            }	
            //console.log(listOfAllPages);
            if(! currentActivePageName in globalThis.listOfAllPages) { console.log("page not exists")}

            globalThis.listOfAllPages[currentActivePageName] = true;
            console.log(globalThis.listOfAllPages);
	
	}

    </script>


    <nav class="wrap">
        <div class="tabs right-align">
            <a :class="globalThis.listOfAllPages['home'] ? 'active' : '' "  onclick="this.props.changeCurrentSelectedPage('home')">Главная</a>
            <a :class="globalThis.listOfAllPages['search'] ? 'active' : '' "  onclick="this.props.changeCurrentSelectedPage('search')">Поиск</a>
            <a :class="globalThis.listOfAllPages['docs'] ? 'active' : '' "  onclick="this.props.changeCurrentSelectedPage('docs')"  >Документация</a>
            <a :class="globalThis.listOfAllPages['price'] ? 'active' : '' " onclick="this.props.changeCurrentSelectedPage('price')" >Цены</a>

    
        </div>
     </ul>
</nav>

</template>

After including component it's displaying fine, only problem that active classes are not changing.

But if I for example change manually in code any page to true (globalThis.listOfAllPages) it's marking correctly.

In console I have correct changing of active values, but styles of items are not changing.
Could you help me?

UPD: it's seems that not Ework, but AlpineJS issue. I think I should close it.
But could you at last to look at my code and say if it's ok?

TypeError: Cannot read properties of undefined (reading '_x_refs')

Hi! I tried copy-past your code example (only changed name of component) in my project to be sure that I am doing all right. But got an error:
Component:

<template id="regions-component">
 <script>
     const privateVar = "I'll never tell."

     export let killCount = 0

     export function shoot(){
         let success = Math.round(Math.random())
         this.killCount += success
         xref('result').innerText = success ? 'Hit!' : 'Miss'
         xref('count').innerText = this.killCount
     }
 </script>
 
 <button onclick="this.props.shoot()">Shoot</button>
 <p x-ref="result"></p>
 <p>Kill Count: <span x-ref="count"></span></p>
</template>

Error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_x_refs')
    at Function.Qr.inline (cdn.min.js:5:31873)
    at u (cdn.min.js:5:1964)
    at cdn.min.js:5:4391
    at Array.forEach (<anonymous>)
    at cdn.min.js:5:4380
    at D (cdn.min.js:5:3323)
    at cdn.min.js:5:3296
    at Array.forEach (<anonymous>)
    at D (cdn.min.js:5:3285)
    at cdn.min.js:5:4349

изображение

How to use component with x-if?

I would like to change displaying items like:

        <template x-data x-if="Alpine.store('auth').menuItemsState['home']">
            <home-component></home-component>
        </template>    

        <template x-data  x-if="Alpine.store('auth').menuItemsState['docs']">
            <docs-component></docs-component>
        </template>

But work fine only x-show, other variants or display both components at same time or produce an error about error cloning node. What is correct way to do such thing?

For example when I am trying to switch to component with follow code I am getting an error:

        <div x-data x-if="Alpine.store('auth').menuItemsState['home']">
            <regions-component></regions-component>
        </div>    

        <div x-data x-if="Alpine.store('auth').menuItemsState['docs']">
            <docs-component></docs-component>
        </div>

error:

cdn.min.js:1 Alpine Expression Error: Cannot read properties of undefined (reading 'cloneNode')

Expression: "Alpine.store('auth').menuItemsState['docs']"

 <div x-data x-if=​"Alpine.store('auth')​.menuItemsState['docs']​">​…​</div>​
Y @ cdn.min.js:1
Vt @ cdn.min.js:1
(anonymous) @ cdn.min.js:5
r @ cdn.min.js:5
tn @ cdn.min.js:1
cdn.min.js:5 Uncaught TypeError: Cannot read properties of undefined (reading 'cloneNode')
    at o (cdn.min.js:5:32081)
    at cdn.min.js:5:32301
    at ye (cdn.min.js:5:1229)
    at cdn.min.js:5:974
    at Vt (cdn.min.js:1:4640)
    at cdn.min.js:5:32293
    at Array.r (cdn.min.js:5:15575)
    at tn (cdn.min.js:1:207)

Should\could I use document.addEventListener in component?

Hi! Could I use document.addEventListener in component if I want, for example, create new $store? Or Alpine should do init parts in itself, and components should only use already initialized data?

Or components should not try to touch document.addEventListener and store all data locally?

Cannot read properties of undefined if trying to call component in x-data

Hi! I have got follow component:

<script>

function foo() {
    console.log("foo")
    return {}
  }

</script>

<template id="regions-component" noshadow>
 <div x-data="this.props.foo" ></div>
</template>

I am getting an error:

cdn.min.js:1 Alpine Expression Error: Cannot read properties of undefined (reading 'foo')

Expression: "this.props.foo"

What I am doing wrong?

Am I right understand that if it's store data locally I do not need to mark function as export? So I can be able only to call it from itself?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.