Releases: osmphp/framework
v0.14.9
Technology Stack Update
- TailwindCSS is updated to 3.0
- PHP 8.1 support
- Apache support
- Windows support
js() Helper Function
Use new js() helper function for passing options to JS controller in a Blade template:
<div data-messenger='{!! \Osm\js(['message' => 'Lorem ipsum ...'])!!}'>
...
</div>
In the JS controller, all passed options are put into the options property:
import Controller from "../../js/Controller";
import {register} from '../../js/scripts';
export default register('messenger', class Messenger extends Controller {
get events() {
return Object.assign({}, super.events, {
'click': 'onClick',
});
}
onClick() {
console.log(this.options.message);
}
});
v0.14.2
There were two changes in Osm Framework:
- TailwindCSS upgraded to 3.0.
- Commit/rollback callbacks don't wait for outer transaction to be executed.
v0.13.22
This minor update comes with two new features: blade traits and modal input capturing.
Blade Traits
Starting from this version, Osm Framework allows injecting your HTML markup into any place of a standard Blade template. For example, if your messages module needs to add a message template markup after the page footer, at the very end of the page, define a blade trait in the themes/_base/views/messages/traits/std-pages/layout.blade.php:
@around({{ $footer }})
@proceed
<template id="message-template">
...
</template>
@endaround
The file name tells the templating engine that messages module modifies std-pages::layout Blade template, the @around directive tell to find {{ $footer }} and replace it with the directive body, and @proceed directive renders original content, that is, {{ $footer }}.
Find more about this feature in the dedicated blog post.
Modal Input Capturing
When active, modal elements - dialogs, pickers, or AJAX spinners - need to prevent user interaction with the rest of the page.
A common approach is putting an overlay <div> under the modal element covering the rest of the page, as a click shield. However, user can still navigate the page with the keyboard.
This version of Osm Framework comes with a better solution. It allows capturing mouse and focus events outside the modal element, and keeping focus inside.
v0.13.13
What's new in this minor update:
- Customize new default page title settings.
- Use new
_admin__tailwindtheme as a base admin area theme. - Use new
$osm_app->area_urlinstead of$osm_app->base_urlfor generating URLs in the current area. - Register routes with parameters in a dynamic trait, see
HttpModuleTraitandRoutesin the Osm Admin project for more details.
v0.13.4
New Documentation Pages
- Getting Started
- Writing PHP Code
- Creating Web Applications
New Features
std-pages::layoutBlade component accepts and renderscanonicalUrl.- Most application settings, if omitted, inherit their values from environment variables.
v0.13.1
Note. When upgrading to this framework version, apply all your project dynamic traits using the #[UseIn] attribute.
Changes:
- Clear the application cache using new
osm refreshcommand. - New
DynamicRouteclass, based onnikic/fast-routepackage. - New
AddTrailingSlashroute class, that redirects to the incoming URL with added/character in its path. - New
$osm_app->base_urlproperty. Set it in tests to null, initialize it in console commands from settings; otherwise, the base URL of the current request is used. - Dynamic traits are applied using the
#[UseIn]attribute. - More directories watched with Gulp.
- Fixed GitHub
testaction.
v0.12.8
Important. After switching to this major version, apply these changes to the project files. Also, update page templates, and use website-wide header, footer, <head> and error page templates.
Page Layout Changes
std-pages::layout Blade component is now a part of _base theme. It means that it can be used in any theme, and contains no Tailwind-specific markup.
If you use the previous component version, update your page templates, and run gulp:
<x-slot name="header">
<header class="container mx-auto fixed top-0 left-0 right-0 z-10">
... current contents ...
</header>
<div class="h-10"></div>
</x-slot>
<div class="container mx-auto px-4 grid grid-cols-12 gap-4">
... current contents ...
</div>
<footer class="container mx-auto">
... current contents ...
</footer>
More Convenient Header And Footer
If the header and footer is the same across the whole website, put them into the std-pages::header and std-pages::footer templates.
Customizable <head>
Put the favicon, the Google fonts and other <head>-specific stuff into the std-pages::head template.
Customizable Error Pages
Render "page not found", "error", and "on maintenance" pages from the std-pages::404, std-pages::500, and std-pages::503 Blade templates, respectively.
Other Changes
- The documentation table of contents have been drafted in the
readme.md. After writing new documentation articles, it's updated. - minor:
css/theme/styles.cssandjs/theme/scripts.jsare also bundled if exist - fix:
Osm_Toolsapp extends the base app class, notOsm_App - fix:
osmt config:npmusesOsm_Projectto reflect over all project modules.CompiledApp::$unsorted_modulesis not needed as a separate property anymore.
v0.11.2
Important. After switching to this major version, apply these changes to the project files.
Changes and fixes:
Descendants::byName()can collect classes not only by#[Name]attribute, but also by another compatible attribute- Console treats PHP warnings and errors as exceptions
- URLs of failed pages are collected in
http.log
v0.10.2
Customizable Gulp Configuration
From now on, Gulp tasks are defined inside Osm Framework.
In the project's gulpfile.js file, define apps and themes to build/watch, and invoke the framework's Gulp script:
// In the global configuration object, keys are application names to be
// compiled, and values are arrays of theme names to build for that application
global.config = {
'Osm_Tools': [],
'Osm_App': ['_front__tailwind']
};
// Run the framework Gulp scripts that define all the Gulp tasks, and
// export these tasks to the Gulp runner
Object.assign(exports, require('./vendor/osmphp/framework/gulp/main'));
Gulp compiles every listed app and clears its cache, as specified in the framework's gulp/buildApp.js file:
module.exports = function buildApp(appName) {
return series(
compile(appName),
refresh(appName),
);
}
After that, Gulp clears the temp directory of every theme, saves there a config.json file containing information about application modules and themes, collects theme files from the project and its dependencies into theme's temp directory, and, finally, calls theme-specific Gulp script. All these steps are specified in the framework's gulp/buildTheme.js file:
module.exports = function buildTheme(appName, themeName) {
let config = JSON.parse(
execSync(`php ${osmt} config:gulp --app=${appName}`).toString());
return series(
clear(appName, themeName),
save(appName, themeName, config),
collect(appName, themeName, config),
call(appName, themeName, config)
);
};
collect() respects theme inheritance. If T2 theme extends T1 theme, then Gulp collects all T2 files, and all T1 files that are not overridden by T2.
Collected theme files include not only Blade templates, CSS styles, JS scripts and images, but also theme-specific Gulp scripts. Most theme-specific Gulp scripts are defined in the _base theme, see themes/_base/gulp directory. However, you can override any of these scripts in your theme. For example, themes/_front__tailwind/gulp/css.js adds Tailwind plugin to CSS file processing.
Typical theme-specific Gulp script clears theme's public directory, adds styles.css and scripts.js of application's modules, bumps the asset version (forcing browsers to reload all assets), builds and bundles CSS and JS, and copies image, font and other files that come with the application modules.
module.exports = function build() {
return series(
clear(),
importJsModules(),
importCssModules(),
bump.once(),
parallel(
files('images'),
files('fonts'),
files('files'),
js(),
css()
)
);
}
Modular NPM Dependencies
Starting from this version, project's package.json file is merged from all module-specific package.json files found in the project and its dependencies. This allows module developers to bring their JS dependencies in the project.
Use the following command to collect the package.json file from all installed modules:
osmt config:npm
Standard Page Layout
Starting from this version, use standard page layout Blade component in your page templates:
<x-std-pages::layout title='Welcome to Osm Framework'>
<h1 class="text-2xl sm:text-4xl font-bold my-8">
{{ \Osm\__("Welcome to Osm Framework") }}
</h1>
</x-base::layout>
Other Changes
- Completely rewritten
README