Releases: TechAkayy/frameworks-lite-for-pinegrow
v3.0.0
- Replaced llty esm cdn script instead of using local package copy (11ty/is-land#22).
- Added youtube tutorial - https://www.youtube.com/watch?v=2MwVes_DJSw.
v2.0.0
-
Menu labels & helper texts are re-worded, to make them easy to understand. Use the simplest menu options for basic usage. Always refer to framework's documentation to learn proper usage.
-
Delete action is now moved under a dropdown as "remove" at the end of the directive input field. Only clear icon is the floating one.
-
Directives section is now displayed just above the Attributes Editor section so that it's easy to use both sections together. For eg, to bind an image source to a state variable,
v-bind:attr
is first selected.- value/state is added.
- then, the
attr
is edited tosrc
via the Attributes editor to make itv-bind:src="imageUrl"
. - This technique is required only when there is a need to edit the LHS (left-hand-side), such as when v-bind'ing an attribute (like above), or when adding event modifiers (
prevent
,once
, etc) to event handlers, for eg,<a @click.stop.prevent="doThat()"></a>
. For more details, refer to the official documentation of the frameworks. (Vue.js - docs)
-
For Alpinejs, replaced jsdelivr cdn links with unpkg ones.
-
[Not active] When using one of the page templates of a framework, the framework is auto-selected in the
Frameworks
menu. This feature is currently not active as it requires backporting eventon_file_created_from_master_page
from Vue Designer to Pinegrow. -
Added readme to the installation package.
v1.2.0
-
The v-cloak or x-cloak inline style tag can be added to the
<head>
tag via theFrameworks
menu. -
Directives and page templates have been refreshed.
-
Directives input box now includes both a clear icon and a delete icon. Previously, truthy directives were displayed as
true
in the control, but not anymore. It will always be in sync with the actual attribute key-value pairs. This also fixes #2. -
Progressive Enhancement -> Progressive Hydration (how/when to hydrate islands to improve performance)
- Progressive hydration (islands architecture) using the Eleventy is-land package (
@llty/is-land
) can be added via theFrameworks
menu. - This includes a sample Pikaday datepicker integration that gets added to the end of the
<body>
tag and partially hydrates when entering the viewport (uses anon:visible
directive similar to Iles/Astro'sclient:visible
directive). - While Iles/Astro supports only certain frameworks and requires a build tool (Vite), the Eleventy is-land solution is framework-independent and can be used on islands in static/server-rendered HTML files.
- Progressive hydration (islands architecture) using the Eleventy is-land package (
V1.1.1
- Examples from official petite-vue docs are now available as page templates.
- Remove v-cloak and x-cloack style tags from head, to avoid conflict with pinegrow dom-play.
- Directives & page templates refreshed.
- Truthy directives are displayed as "true" in the
Add directive
section, but the "true" value is in fact not added to the tag - fixes #2
v1.1.0
- Ability to load plugin for both single HTML page (free version of Pinegrow) and projects (requires Pinegrow pro).
- Via Frameworks menu, add CDN scripts of different flavours either as Global App (or) Islands to your page.
- Via Frameworks menu, enable "Auto reload on update" to automatically refresh page when adding/updating a directive.
v-*
andx-*
tags are now displayed in the page tree, so that it's easy to identify them.- Search option - when clicking 'Add directive' button, directives can be easily searched.
- Alpinejs - when adding x-for or x-if, the content is automatically wrapped inside a
template
tag, as required by alpinejs design. - Updated readme with step-by-step instructions with annotated screenshots for quick-start.