### Environment Variable Setup
Source: https://github.com/ffraenz/private-composer-installer
This example shows how to set an environment variable to provide the necessary URL for a private package. The private-composer-installer plugin reads this variable to fetch the package during installation.
```Shell
# Set the environment variable for the private package URL
export COMPOSER_PRIVATE_PACKAGE_URL="https://username:your_token@your-private-git-server.com/repo/my/private-package.zip"
# Or, if using a .env file (ensure it's ignored by git)
# echo "COMPOSER_PRIVATE_PACKAGE_URL=https://username:your_token@your-private-git-server.com/repo/my/private-package.zip" > .env
# Then run composer install
composer install
```
--------------------------------
### Install Composer Dependencies
Source: https://github.com/ffraenz/private-composer-installer
This command uses Docker Compose to run a container and execute the 'composer install' command, ensuring all project dependencies, including the private-composer-installer, are properly installed.
```Shell
docker-compose run --rm composer composer install
```
--------------------------------
### Composer Configuration Example
Source: https://github.com/ffraenz/private-composer-installer
This example demonstrates how to configure a private package within your composer.json file. It utilizes the private-composer-installer plugin to manage the distribution URL, allowing sensitive parts to be externalized.
```JSON
{
"name": "my/project",
"require": {
"ffraenz/private-composer-installer": ">=1.0.0"
},
"repositories": [
{
"type": "package",
"package": {
"name": "my/private-package",
"version": "1.0.0",
"dist": {
"url": "${COMPOSER_PRIVATE_PACKAGE_URL}",
"type": "zip"
}
}
}
]
}
```
--------------------------------
### Add Alpine.js using CDN
Source: https://alpinejs.dev/start-here
Include Alpine.js in your project using a CDN link. This is the simplest way to get started with Alpine.js. Add the following script tag to the end of the section in your HTML file.
```HTML
```
--------------------------------
### Docker Installation
Source: https://github.com/ffraenz/private-composer-installer
Dockerfile for setting up an environment with Composer and the private-composer-installer.
```dockerfile
FROM composer:latest
RUN composer global require ffraenz/private-composer-installer --no-plugins --no-scripts
# Copy your project files
COPY . /app
WORKDIR /app
# Install dependencies
RUN composer install
```
--------------------------------
### Composer Configuration
Source: https://github.com/ffraenz/private-composer-installer
Example of how to configure the private-composer-installer in composer.json to manage private package dependencies.
```json
{
"name": "ffraenz/private-composer-installer",
"description": "Composer plugin to reference private package urls",
"type": "composer-plugin",
"license": "MIT",
"authors": [
{
"name": "Franz",
"email": "franz@example.com"
}
],
"require": {
"composer-plugin-api": "^1.0|^2.0",
"php": ">=5.3.0"
},
"autoload": {
"psr-4": {
"ffraenz\\PrivateComposerInstaller\\": "src/"
}
},
"extra": {
"installer-paths": {
"vendor/ffraenz/private-composer-installer": [
"type:composer-plugin"
]
}
}
}
```
--------------------------------
### Composer Install Helper with Environment Variables
Source: https://github.com/ffraenz/private-composer-installer
This snippet demonstrates how to use environment variables to manage sensitive keys during Composer package installations, improving security by avoiding direct URL exposure.
```PHP
getPrettyName();
}
}
// This is a conceptual example. The actual integration would be within Composer's plugin system.
```
--------------------------------
### Install Composer Dependencies
Source: https://github.com/ffraenz/private-composer-installer
Installs Composer dependencies for the project using Docker Compose. This command ensures that all necessary packages are downloaded and configured.
```shell
docker-compose run --rm composer composer install
```
--------------------------------
### Dynamic Import() Example
Source: https://v8.dev/features/modules
Shows how to use the dynamic import() function to load modules on-demand, improving initial load-time performance. This example demonstrates loading a module and using its exported functions.
```JavaScript
import {shout} from './lib.mjs';
```
--------------------------------
### Alpine.js Setup and Basic Usage
Source: https://alpinejs.dev/start-here
This snippet demonstrates how to set up Alpine.js in an HTML file and display a simple message. It includes the necessary script tag and basic Alpine directives for data binding and text display.
```html
```
--------------------------------
### Livewire Initialization and Docsearch Integration
Source: https://alpinejs.dev/start-here
This JavaScript code initializes Livewire, sets up the Livewire application URL and token, and integrates the Docsearch library for site search functionality. It ensures Livewire starts correctly on DOMContentLoaded or when Alpine.js initializes.
```javascript
window.livewire = new Livewire();window.Livewire = window.livewire;
window.livewire_app_url = '';
window.livewire_token = 'FUxk0Xc5rfgp3wGYtQhSJXeK84YFJYjcLA36wfvK';
window.deferLoadingAlpine = function (callback) {
window.addEventListener('livewire:load', function () {
callback();
});
};
let started = false;
window.addEventListener('alpine:initializing', function () {
if (! started) {
window.livewire.start();
started = true;
}
});
document.addEventListener("DOMContentLoaded", function () {
if (! started) {
window.livewire.start();
started = true;
}
});
if (document.querySelector('#docsearch')) {
docsearch({
container: '#docsearch',
appId: 'SM9GAGAUKZ',
apiKey: '1fad8740c0cf75209d11ae25f1f6f55c',
indexName: 'alpinejs',
});
}
```
--------------------------------
### Require ACF Pro with Composer
Source: https://github.com/ffraenz/private-composer-installer
This command uses Composer to install the ACF Pro package into your project. Ensure you have Composer installed and configured.
```shell
composer require "advanced-custom-fields/advanced-custom-fields-pro:*"
```
--------------------------------
### Example JavaScript for Block Editor
Source: https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/
This JavaScript code provides an example of functionality that can be added to the WordPress block editor using the 'enqueue_block_editor_assets' hook. It demonstrates registering a new block type.
```JavaScript
/**
* WordPress block editor script.
*/
( function( wp ) {
wp.blocks.registerBlockType( 'my-plugin/example-block', {
title: 'Example Block',
icon: 'smiley',
category: 'common',
edit: function() {
return wp.element.createElement( 'p', null, 'Edit mode' );
},
save: function() {
return wp.element.createElement( 'p', null, 'Save mode' );
},
} );
} )( window.wp );
```
--------------------------------
### Require Private Package with Composer
Source: https://github.com/ffraenz/private-composer-installer
Use the Composer command-line interface to require your private package. This command tells Composer to fetch and install the specified package, respecting the configuration in composer.json and .env.
```Shell
composer require "package-name/package-name:*"
```
--------------------------------
### Composer Configuration for Private Composer Installer
Source: https://github.com/ffraenz/private-composer-installer
This JSON snippet illustrates how to configure the private-composer-installer within the 'extra' section of your composer.json file. It allows customization of the dotenv file path and name.
```JSON
{
"name": "...",
"description": "...",
"require": {
},
"extra": {
"private-composer-installer": {
"dotenv-path": ".",
"dotenv-name": ".env"
}
}
}
```
--------------------------------
### Environment Variable for ACF Pro Plugin Key
Source: https://github.com/ffraenz/private-composer-installer
This example shows how to define the environment variable required for the ACF Pro plugin. This variable, PLUGIN_ACF_KEY, will be used by the private-composer-installer to authenticate and download the plugin from its distribution URL.
```Shell
PLUGIN_ACF_KEY=pleasedontusethiskey
```
--------------------------------
### HTML File Input Example
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
This snippet demonstrates how to create a file input element in HTML, allowing users to select a profile picture. It includes a label for accessibility and specifies accepted image file types.
```html
```
--------------------------------
### Environment Variable for Private Package Key
Source: https://github.com/ffraenz/private-composer-installer
This example demonstrates how to define an environment variable in a .env file to store a sensitive token, such as a package API key, which will be used to replace placeholders in Composer package URLs.
```Shell
PACKAGE_KEY=pleasedontusethiskey
```
--------------------------------
### Dynamic React Component (Dogs List Example)
Source: https://github.com/WordPress/gutenberg/discussions/38224
This JavaScript code snippet shows a React component (`DogsList`) that renders a list of dogs. It demonstrates a scenario where the component's output (the list structure and conditional text) depends on the input props (`dogs`), making it unsuitable for simple static prerendering due to its dynamic nature.
```javascript
const DogsList = ({ dogs }) => (
{dogs.map(({ name }) => (
{name} {name === "Max" ? "is NOT a good dog." : "is a good dog!"}
))}
);
```
--------------------------------
### HTML: Accept any image or PDF files
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
This example demonstrates using the 'accept' attribute to allow users to select any image file (using 'image/*') or PDF files (using '.pdf'). The specifiers are comma-separated.
```html
```
--------------------------------
### Using JavaScript modules in the browser
Source: https://v8.dev/features/modules
Provides examples of how to load JavaScript modules in a web browser using the `
```
--------------------------------
### Import Modules by Package Name in JavaScript
Source: https://v8.dev/features/modules
This JavaScript code demonstrates importing modules using their package names, a common practice in Node.js/npm environments. It uses 'moment' and 'lodash-es' as examples.
```JavaScript
import moment from 'moment';
import {pluck} from 'lodash-es';
```
--------------------------------
### JSX to PHP Compilation for React Blocks
Source: https://github.com/WordPress/gutenberg/discussions/38224
This snippet outlines a strategy for compiling JSX to PHP to enable server rendering and client-side hydration for React-based blocks. It involves creating a JSX to PHP compiler, starting with a subset of JSX, and using ESLint for compliance. The process generates PHP templates from JSX, assigns them as render callbacks, and hydrates blocks on the client using the same function.
```JavaScript
1. Generate PHP templates from JSX that accept the block attributes as props
2. Assign as the `render_callback` of a block type.
3. Hydrate islands of blocks in the DOM, using the same function that generated it.
```
--------------------------------
### GitHub Code Search Syntax
Source: https://github.com/ffraenz/private-composer-installer
Provides tips and syntax for effectively searching code within GitHub repositories. This includes information on qualifiers and how to refine search queries for better results.
```English
Search syntax tips
https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax
```
--------------------------------
### Install ACF Pro Plugin with Composer
Source: https://github.com/ffraenz/private-composer-installer
This JSON snippet configures Composer to install the Advanced Custom Fields (ACF) Pro plugin. It specifies the package name, desired version, type as 'wordpress-plugin', download URL, and required dependencies like 'composer/installers'.
```json
{
"type": "package",
"package": {
"name": "advanced-custom-fields/advanced-custom-fields-pro",
"version": "REPLACE_WITH_LATEST_ACF_VERSION",
"type": "wordpress-plugin",
"dist": {
"type": "zip",
"url": "https://connect.advancedcustomfields.com/index.php?a=download&p=pro&k={%PLUGIN_ACF_KEY}&t={%VERSION}"
},
"require": {
"composer/installers": "^1.4",
"ffraenz/private-composer-installer": "^5.0"
}
}
}
```
--------------------------------
### Composer Configuration
Source: https://github.com/ffraenz/private-composer-installer
This snippet shows the composer.json file, which defines the project's dependencies and autoloading configuration for PHP.
```json
{
"name": "ffraenz/private-composer-installer",
"description": "Install private packages from private repositories.",
"type": "library",
"license": "MIT",
"authors": [
{
"name": "Franz",
"email": "franz@example.com"
}
],
"require": {
"php": ">=7.1",
"composer/composer": "^1.8"
},
"autoload": {
"psr-4": {
"Ffraenz\\PrivateComposerInstaller\\": "src/"
}
},
"bin": [
"bin/private-composer-installer"
]
}
```
--------------------------------
### PHPUnit Configuration
Source: https://github.com/ffraenz/private-composer-installer
This snippet shows the phpunit.xml.dist file, which configures PHPUnit for running tests. It specifies the bootstrap file and test suites.
```xml
./tests/Unit./tests/Feature
```
--------------------------------
### Manifest Events
Source: https://developer.mozilla.org/en-US/docs/Web/Events
Details events related to the installation of progressive web app manifests. These events are fired on the Window object.
```JavaScript
// Example of handling manifest installation events (conceptual):
// Note: Direct event listeners for manifest installation are not standard.
// This is typically handled via service workers and the 'fetch' event for the manifest file.
// For example, a service worker might intercept the manifest fetch:
/*
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('/manifest.json')) {
console.log('Manifest fetched');
// Handle manifest logic here
}
});
*/
```
--------------------------------
### Twig Dynamic Inheritance Example
Source: https://twig.symfony.com/doc/3.x/tags/extends.html
Demonstrates dynamic template inheritance in Twig, where the parent template can be specified using a variable. This allows for more flexible and data-driven template selection.
```Twig
{% extends some_var %}
```
--------------------------------
### Add a named function as an event listener
Source: https://developer.mozilla.org/en-US/docs/Web/Events
This example demonstrates how to attach a named function 'greet' as a listener for the 'click' event on a button element. The event object is passed to the handler.
```javascript
const btn = document.querySelector("button");
function greet(event) {
console.log("greet:", event);
}
btn.addEventListener("click", greet);
```
--------------------------------
### Composer Package Versioning
Source: https://github.com/ffraenz/private-composer-installer
This snippet explains how the Block Studio LLM Text plugin handles versioning for Composer packages. It details the replacement of the {%VERSION} placeholder in dist URLs with the package's version, particularly noting its behavior in Composer 1.x.
```PHP
This plugin is compatible with both Composer 2.x (latest) and 1.x.
When installing or updating a package, the dist URL {%VERSION} placeholder gets replaced by the version set in the package. In Composer 1 the dist URL version gets fulfilled before it is added to composer.lock.
```
--------------------------------
### Staqt.io Tracking Initialization
Source: https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/
Initializes Staqt.io tracking with view and click tracking data, including blog ID, post ID, timezone, server information, and JavaScript library version.
```javascript
_stq = window._stq || [];
_stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"209306761\",\"post\":\"133363\",\"tz\":\"0\",\"srv\":\"developer.wordpress.org\",\"j\":\"1:14.9.1\"}") ]);
_stq.push([ "clickTrackerInit", "209306761", "133363" ]);
```
--------------------------------
### Dockerfile for Composer
Source: https://github.com/ffraenz/private-composer-installer
This Dockerfile defines the environment for running Composer commands. It uses a PHP base image and sets the working directory.
```dockerfile
FROM php:7.4-cli
WORKDIR /app
COPY composer.json composer.lock ./
RUN composer install --no-dev --optimize-autoloader
```
--------------------------------
### Simulate Mouse Click Event
Source: https://developer.mozilla.org/en-US/docs/Web/Events
This example demonstrates how to programmatically generate a 'click' event using the MouseEvent constructor and dispatch it to an element, such as a checkbox. It checks if the event was cancelled by any event handlers.
```javascript
function simulateClick() {
const event = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
});
const cb = document.getElementById("checkbox");
const cancelled = !cb.dispatchEvent(event);
if (cancelled) {
// A handler called preventDefault.
alert("cancelled");
} else {
// None of the handlers called preventDefault.
alert("not cancelled");
}
}
```
--------------------------------
### PHPUnit Configuration
Source: https://github.com/ffraenz/private-composer-installer
PHPUnit configuration file for running tests, including bootstrap and test suite definitions.
```xml
./tests/Unit./tests/Feature./src
```
--------------------------------
### WebAssembly for QuickJS Runtime
Source: https://github.com/WordPress/gutenberg/discussions/38224
An experimental idea considered involves compiling the QuickJS JavaScript engine to WebAssembly and running it using a PHP runtime like wasmer-php. This would allow server-side execution of JavaScript without a dedicated Node.js environment, but requires a custom PHP extension.
```WebAssembly
;; This is a conceptual representation of WebAssembly code
;; Actual QuickJS WASM compilation would be more complex
(module
(func $add (param i32) (param i32) (result i32)
local.get 0
local.get 1
i32.add)
(export "add" (func $add))
)
```
--------------------------------
### Using Custom Virtual Scroller Element
Source: https://v8.dev/features/modules
This example shows how to use a custom virtual scroller element, which can be progressively enhanced by the Layered API. The content is placed within the custom element tags.
```HTML
```
--------------------------------
### Docker Compose Configuration
Source: https://github.com/ffraenz/private-composer-installer
Docker Compose configuration file to set up services, including one that utilizes Composer and the private-composer-installer.
```yaml
version: '3'
services:
app:
build:
context: .
dockerfile: composer.dockerfile
volumes:
- .:/app
environment:
COMPOSER_AUTH: '{"http-basic": {"username": "your-username", "password": "your-password"}}'
```
--------------------------------
### Docker Configuration
Source: https://github.com/ffraenz/private-composer-installer
This snippet contains the docker-compose.yml file, used to define and run multi-container Docker applications. It likely sets up services for development or testing.
```yaml
version: '3.7'
services:
php:
build:
context: .
dockerfile: composer.dockerfile
volumes:
- ./:/app
working_dir: /app
composer:
image: composer:latest
volumes:
- ./:/app
working_dir: /app
command: "composer install"
```
--------------------------------
### Register a Service Worker with Module Type in JavaScript
Source: https://v8.dev/features/modules
This example shows how to register a ServiceWorker using JavaScript, with the 'module' type option enabled for ES module support. The registration is performed with 'worker.mjs'.
```JavaScript
const registration = await navigator.serviceWorker.register('worker.mjs', { type: 'module' });
```
--------------------------------
### Compile Blocks with Mitosis to Liquid and React
Source: https://github.com/WordPress/gutenberg/discussions/38224
This snippet demonstrates a method for compiling blocks authored in Mitosis format to both Liquid templates and React components. This approach aims to achieve 'universal blocks' that can run in both PHP and JS environments, facilitating block hydration for server-rendered markup.
```Mitosis
// Mitosis code for universal blocks
```
```Liquid
// Liquid templates generated from Mitosis
```
```React
// React components generated from Mitosis for hydration
```
--------------------------------
### Twig Block Nesting Example
Source: https://twig.symfony.com/doc/3.x/tags/extends.html
Illustrates block nesting in Twig, where blocks can contain other blocks. It shows how nested blocks can access variables from their outer scopes, facilitating complex layout structures.
```Twig
{% for item in seq %}
{% block loop_item %}{{ item }}{% endblock %}
{% endfor %}
```
--------------------------------
### Create CustomEvent with Detail - JavaScript
Source: https://developer.mozilla.org/en-US/docs/Web/Events
Shows how to create a CustomEvent with additional data passed via the 'detail' property. The example demonstrates passing a dataset value and accessing it within the event listener.
```javascript
const event = new CustomEvent("build", { detail: elem.dataset.time });
function eventHandler(e) {
console.log(`The time is: ${e.detail}`);
}
```
--------------------------------
### Prism.js Initialization (JavaScript)
Source: https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/
This snippet initializes Prism.js, a lightweight, extensible syntax highlighting library. It configures Prism with the plugin URL for code syntax highlighting within the WordPress environment.
```javascript
var prism_settings = {"pluginUrl":"https://developer.wordpress.org/wp-content/plugins/code-syntax-block/"};
```
--------------------------------
### Composer Package Configuration with Environment Variables
Source: https://github.com/ffraenz/private-composer-installer
This JSON snippet shows how to configure a private Composer package, specifying a zip archive URL with environment variable placeholders for sensitive tokens like API keys and versions. It also includes the necessary 'require' directive for the private-composer-installer.
```JSON
{
"type": "package",
"package": {
"name": "package-name/package-name",
"version": "REPLACE_WITH_LATEST_PACKAGE_VERSION",
"dist": {
"type": "zip",
"url": "https://example.com/package-name.zip?key={%PACKAGE_KEY}&version={%VERSION}"
},
"require": {
"ffraenz/private-composer-installer": "^5.0"
}
}
}
```
--------------------------------
### Add an event listener with AbortSignal for cleanup
Source: https://developer.mozilla.org/en-US/docs/Web/Events
This example shows how to use an AbortSignal to manage event listeners. An anonymous function is attached as a 'click' event listener, and it can be removed by calling abort() on the associated AbortController.
```javascript
const controller = new AbortController();
btn.addEventListener(
"click",
(event) => {
console.log("greet:", event);
},
{ signal: controller.signal },
); // pass an AbortSignal to this handler
controller.abort(); // removes any/all event handlers associated with this controller
```
--------------------------------
### Alpine.js: Build Dropdown with x-show and x-on
Source: https://alpinejs.dev/start-here
This snippet demonstrates building a dropdown component using `x-data` for state management (`open`), `x-on` (using `@` shorthand) for toggling the state, and `x-show` for conditionally displaying content. It also includes `@click.outside` to close the dropdown when clicking outside.
```html
Contents...
```
--------------------------------
### Alpine.js: Handle Click Events with x-on
Source: https://alpinejs.dev/start-here
The `x-on` directive (or its shorthand `@`) listens for DOM events and executes JavaScript expressions. This example shows how to increment a `count` property on a button click, demonstrating event handling and state modification.
```html
```
--------------------------------
### Configure Composer.json for Private Packages
Source: https://github.com/ffraenz/private-composer-installer
Add the private package details to the 'repositories' field in your composer.json file. Specify the package name, version, distribution type, URL, and any required dependencies. Use placeholders for sensitive information like package keys and versions.
```JSON
{
"type": "package",
"package": {
"name": "package-name/package-name",
"version": "REPLACE_WITH_LATEST_PACKAGE_VERSION",
"dist": {
"type": "zip",
"url": "https://example.com/package-name.zip?key={%PACKAGE_KEY}&version={%VERSION}"
},
"require": {
"ffraenz/private-composer-installer": "^5.0"
}
}
}
```
--------------------------------
### JavaScript: Stop Event Propagation
Source: https://developer.mozilla.org/en-US/docs/Web/Events
Provides examples of using `Event.stopPropagation()` and `Event.stopImmediatePropagation()` to control how events propagate through the DOM. `stopPropagation()` prevents listeners on subsequent elements, while `stopImmediatePropagation()` also prevents remaining listeners on the current element.
```JavaScript
event.stopPropagation();
```
```JavaScript
event.stopImmediatePropagation();
```
--------------------------------
### Preload JavaScript Modules with modulepreload
Source: https://v8.dev/features/modules
This snippet demonstrates how to use `` to instruct the browser to preload and potentially precompile JavaScript modules and their dependencies. This is crucial for optimizing the delivery of modules, especially those with complex dependency trees, by allowing the browser to discover dependencies upfront.
```HTML
```
--------------------------------
### Composer Command to Require ACF Pro Plugin
Source: https://github.com/ffraenz/private-composer-installer
This command instructs Composer to install the Advanced Custom Fields Pro plugin. The private-composer-installer will automatically resolve the {%PLUGIN_ACF_KEY} placeholder in the distribution URL using the provided environment variable.
```Shell
composer require "advanced-custom-fields/advanced-custom-fields-pro:*"
```
--------------------------------
### Create and Dispatch Basic Event - JavaScript
Source: https://developer.mozilla.org/en-US/docs/Web/Events
Demonstrates creating a basic DOM event named 'build' and dispatching it on an element. It also shows how to listen for this event using addEventListener.
```javascript
const event = new Event("build");
// Listen for the event.
elem.addEventListener(
"build",
(e) => {
/* … */
},
false,
);
// Dispatch the event.
elem.dispatchEvent(event);
```
--------------------------------
### Alpine.js: Toggle Element Visibility with x-show
Source: https://alpinejs.dev/start-here
The `x-show` directive controls the visibility of an HTML element based on a JavaScript expression. This example shows how to toggle the display of 'Contents...' based on the `open` state variable, a core feature for conditional rendering.
```html
Contents...
Contents...
```
--------------------------------
### Interactive Blocks with Mitosis and React Hydration
Source: https://github.com/WordPress/gutenberg/discussions/38224
This solution uses the Mitosis framework to define blocks that can be compiled to both Liquid templates and React components. The React components are responsible for hydrating the server-rendered HTML on the client-side, enabling interactivity.
```JavaScript
import { component } from '@builder.io/mitosis';
function MyCounter(props) {
const [count, setCount] = React.useState(0);
return (
);
}
export default component(MyCounter);
```
```React
import React from 'react';
function MyCounter(props) {
const [count, setCount] = React.useState(0);
return (
);
}
export default MyCounter;
```
```Liquid
{% comment %} This is a placeholder for the Liquid template {% endcomment %}
```
--------------------------------
### JavaScript Filter Logic for Computed Property
Source: https://alpinejs.dev/start-here
Illustrates the core JavaScript logic used within an Alpine.js getter to filter an array. It shows how to use the `filter` method with a callback function that checks if array elements start with a given search string.
```javascript
return this.items.filter(
i => i.startsWith(this.search)
)
```
--------------------------------
### Prerendering React Component to HTML (Build Time)
Source: https://github.com/WordPress/gutenberg/discussions/38224
This JavaScript code snippet demonstrates how to prerender a React component to a static HTML string at build time using `renderToStaticMarkup`. It includes placeholders for props that will be filled later on the server. This approach is suitable for simple blocks where props do not dictate the HTML structure.
```javascript
const markup = renderToStaticMarkup(
);
saveTemplate(markup, "_inc/blocks/upgrade.html");
```
--------------------------------
### Run Tests and Check Coding Standards
Source: https://github.com/ffraenz/private-composer-installer
This command, executed within a Docker Compose environment, runs the project's tests and checks for coding standard compliance using Composer scripts. This is typically run before pushing changes to the repository.
```Shell
docker-compose run --rm composer composer test
```
--------------------------------
### Twig Child Template Example
Source: https://twig.symfony.com/doc/3.x/tags/extends.html
Demonstrates a child Twig template that extends a base template ('base.html.twig'). It overrides the 'title', 'head', and 'content' blocks, showcasing how to provide specific content and include parent block content using 'parent()'.
```Twig
{% extends "base.html.twig" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ parent() }}
{% endblock %}
{% block content %}
Index
Welcome on my awesome homepage.
{% endblock %}
```
--------------------------------
### Twig Base Template Example
Source: https://twig.symfony.com/doc/3.x/tags/extends.html
Defines a base HTML template structure using Twig's block syntax. It includes blocks for head content, title, main content, and footer, allowing child templates to override these sections.
```Twig
{% block head %}
{% block title %}{% endblock %} - My Webpage
{% endblock %}
{% block content %}{% endblock %}
```
--------------------------------
### Alpine.js: Display Reactive Data with x-text
Source: https://alpinejs.dev/start-here
The `x-text` directive updates an element's text content based on a JavaScript expression. This example binds the text content of a `span` to the reactive `count` property, ensuring the display updates automatically when `count` changes.
```html
```
--------------------------------
### PHP CodeSniffer Configuration
Source: https://github.com/ffraenz/private-composer-installer
Configuration file for PHP CodeSniffer, specifying coding standards and paths.
```xml
The coding standard for PrivateComposerInstaller../src./tests
```
--------------------------------
### Module vs. Classic Script Execution
Source: https://v8.dev/features/modules
This example illustrates the difference in execution behavior between classic JavaScript scripts and modules. Classic scripts are executed every time they are added to the DOM, while module scripts are evaluated only once, even if referenced multiple times or imported.
```html
```
--------------------------------
### Server-Side HTML Template Population (Request Time)
Source: https://github.com/WordPress/gutenberg/discussions/38224
This PHP code snippet illustrates how to include a pre-rendered HTML template and replace placeholder values with dynamic props at request time. It reads the generated HTML file and performs string replacements for each prop, making the static template dynamic.
```php
ob_start();
include JETPACK__PLUGIN_DIR . "_inc/blocks/upgrade.html";
$markup = ob_get_clean();
foreach ( $props as $key => $value ) {
$markup = str_replace(
"#$key#", // <---- like `planName` in the code snippet above
$value,
$markup
);
}
echo $markup;
```
--------------------------------
### Get Block Wrapper Attributes with Class and Style
Source: https://developer.wordpress.org/reference/functions/get_block_wrapper_attributes/
This snippet demonstrates how to use the get_block_wrapper_attributes() function to include 'class' and 'style' attributes for a block's wrapper. The function accepts an array of attributes, which are then applied to the outermost HTML element of the block.
```PHP
$wrapper_attributes = get_block_wrapper_attributes(
[
'class' => 'custom-class',
'style' => 'color: #333',
]
);
return sprintf( '...', $wrapper_attributes );
```
--------------------------------
### Configure Composer for Dotenv
Source: https://github.com/ffraenz/private-composer-installer
This JSON snippet demonstrates how to configure your composer.json file to specify the path and name for your .env file. This allows the private-composer-installer to correctly load environment variables.
```json
{
"name": "...",
"description": "...",
"require": {
},
"extra": {
"private-composer-installer": {
"dotenv-path": ".",
"dotenv-name": ".env"
}
}
}
```
--------------------------------
### HTML: Accept specific file types and MIME types
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
The 'accept' attribute specifies the file types the file input should accept. It uses a comma-separated list of unique file type specifiers, which can be file extensions (e.g., '.doc') or MIME types (e.g., 'application/msword'). This example shows accepting Word documents.
```html
```
--------------------------------
### Run Tests and Check Coding Standards
Source: https://github.com/ffraenz/private-composer-installer
Executes tests and checks coding standards for the project using Composer within a Docker Compose environment. This command helps maintain code quality and identify potential issues before committing changes.
```shell
docker-compose run --rm composer composer test
```