search

posthtml / posthtml-expressions

Use variables, JS-like expressions, and even markup-powered logic in your HTML.
Other
123 stars 20 forks source link

Script locals always override the locals passed via attribute #132

Closed thewebartisan7 closed 2 years ago

thewebartisan7 commented 2 years ago

Would be possible that script locals inside component act as default locals, and the locals passed via attribute override the script locals?

Because right now it's the opposite, the script locals override the locals passed via attribute.

And I can't even do something like this:

<script locals>
  module.exports = {
    name: typeof name !== "undefined" ? name : "John"
  }
</script>

When "name" is the locals passed via attribute locals.

juliovedovatto commented 2 years ago

@thewebartisan7 I just stumbled with this situation today!

I sent a PR to address this situation, allowing using global locals from config or even when using posthtml-include plugin together.

Would you like to test if my chance solves your issue as well? 

npm install github:Konnng/posthtml-expressions

or if case you use posthtml-include as me. You will need to force dependency resolution.

npm >= 8.3

"overrides": {
    "posthtml-include": {
      "posthtml-expressions": "github:Konnng/posthtml-expressions"
    }
}

or yarn

"resolutions": {
      "**/posthtml-expressions": "github:Konnng/posthtml-expressions"
}

With my forked package, you would just need to change to:

<script locals>
  module.exports = {
    name: locals.name ? locals.name : "John"
  }
</script>

Hope it helps 👍🏻

thewebartisan7 commented 2 years ago

Thanks! Will try for sure

At the moment I am doing something like below, but with your solution it's much cleaner

<script locals>
  module.exports = {
    defaultName: "John"
  }
</script>

<span>
  {{ typeof name !== "undefined" ? name : defaultName }}
</span>
thewebartisan7 commented 2 years ago

Works perfectly! I tested with posthtml-include, posthtml-extend and posthtml-modules and works perfectly with all of them!

<!-- test/test-local.html -->
<script locals>
  module.exports = {
    ...{
      text: "Default text",
      text2: "Default text2",
      text3: "Default text3",
    },
    ...locals
  }
</script>

<span>
  text is {{ text }}<br>
  text2 is {{ text2 }}<br>
  text3 is {{ text3 }}<br>
</span>
<!-- test/test-page.html -->
<include src="test/test-local.html"></include>
<include src="test/test-local.html" locals='{ "text": "I am set via attribute locals" }'></include>
<module href="test/test-local.html" locals='{ "text": "I am set via attribute locals" }'></module>
<module href="test/test-local.html" text='I am set via attribute value-name'></module>
<!-- test/layout.html -->
<script locals>
  module.exports = {
    ...{
      bodyClass: "body-class",
      title: "title"
    },
    ...locals
  }
</script>
<html>
<head>
  <title>{{ title }}</title>
</head>

<body>
page title: {{ title }}<br>
body class: {{ bodyClass }}

<div class="content">
  <block name="content"></block>
</div>
<footer>
  <block name="footer">footer content</block>
</footer>
</body>
</html>
<!-- test/test-layout.html -->
<extends src="test/layout.html" locals='{ "bodyClass": "new body class" }'>
  <block name="title">How to use posthtml-extend</block>
  <block name="content">Read the documentation</block>
</extends>

This is great addition as right now I was using always typeof check before using variable, and this way looks pretty similar to Blade default props!

I hope your PR get merged soon!

juliovedovatto commented 2 years ago

@thewebartisan7 I'm glad that my change solved your issue and thanks for testing even further!

Friendly ping to @Scrum

Scrum commented 2 years ago

v1.10.0