@broxium/compiler 1.3.2 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +12 -4
- package/dist/index.mjs +12 -4
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -117,7 +117,18 @@ import { createElement, Fragment, Children } from 'react';
|
|
|
117
117
|
var __islandSeq = 0;
|
|
118
118
|
function __nextIslandId() { return 'bi-' + (++__islandSeq) + '-' + Math.random().toString(36).slice(2,7); }
|
|
119
119
|
|
|
120
|
-
export function BrodoxImage({ src, alt, width, height, fill, className, style, priority, quality = 75, sizes }) {
|
|
120
|
+
export function BrodoxImage({ src, alt, width, height, fill, className, style, priority, quality = 75, sizes, direct = false }) {
|
|
121
|
+
const imgStyle = fill
|
|
122
|
+
? Object.assign({ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }, style || {})
|
|
123
|
+
: (style || {});
|
|
124
|
+
if (direct) {
|
|
125
|
+
return createElement('img', {
|
|
126
|
+
src, alt: alt || '',
|
|
127
|
+
width: fill ? undefined : width, height: fill ? undefined : height,
|
|
128
|
+
loading: priority ? 'eager' : 'lazy', decoding: 'async',
|
|
129
|
+
className, style: imgStyle,
|
|
130
|
+
});
|
|
131
|
+
}
|
|
121
132
|
const maxW = width || 1920;
|
|
122
133
|
const widths = [320, 640, 768, 1024, 1280, 1920].filter(w => w <= maxW);
|
|
123
134
|
if (!widths.length) widths.push(maxW);
|
|
@@ -125,9 +136,6 @@ export function BrodoxImage({ src, alt, width, height, fill, className, style, p
|
|
|
125
136
|
const enc = encodeURIComponent(src);
|
|
126
137
|
const optimisedSrc = '/api/image?src=' + enc + '&w=' + maxW + '&q=' + q + '&fmt=webp';
|
|
127
138
|
const srcSet = widths.map(w => '/api/image?src=' + enc + '&w=' + w + '&q=' + q + '&fmt=webp ' + w + 'w').join(', ');
|
|
128
|
-
const imgStyle = fill
|
|
129
|
-
? Object.assign({ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }, style || {})
|
|
130
|
-
: (style || {});
|
|
131
139
|
return createElement('img', {
|
|
132
140
|
src: optimisedSrc, srcSet, sizes, alt: alt || '',
|
|
133
141
|
width: fill ? undefined : width, height: fill ? undefined : height,
|
package/dist/index.mjs
CHANGED
|
@@ -88,7 +88,18 @@ import { createElement, Fragment, Children } from 'react';
|
|
|
88
88
|
var __islandSeq = 0;
|
|
89
89
|
function __nextIslandId() { return 'bi-' + (++__islandSeq) + '-' + Math.random().toString(36).slice(2,7); }
|
|
90
90
|
|
|
91
|
-
export function BrodoxImage({ src, alt, width, height, fill, className, style, priority, quality = 75, sizes }) {
|
|
91
|
+
export function BrodoxImage({ src, alt, width, height, fill, className, style, priority, quality = 75, sizes, direct = false }) {
|
|
92
|
+
const imgStyle = fill
|
|
93
|
+
? Object.assign({ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }, style || {})
|
|
94
|
+
: (style || {});
|
|
95
|
+
if (direct) {
|
|
96
|
+
return createElement('img', {
|
|
97
|
+
src, alt: alt || '',
|
|
98
|
+
width: fill ? undefined : width, height: fill ? undefined : height,
|
|
99
|
+
loading: priority ? 'eager' : 'lazy', decoding: 'async',
|
|
100
|
+
className, style: imgStyle,
|
|
101
|
+
});
|
|
102
|
+
}
|
|
92
103
|
const maxW = width || 1920;
|
|
93
104
|
const widths = [320, 640, 768, 1024, 1280, 1920].filter(w => w <= maxW);
|
|
94
105
|
if (!widths.length) widths.push(maxW);
|
|
@@ -96,9 +107,6 @@ export function BrodoxImage({ src, alt, width, height, fill, className, style, p
|
|
|
96
107
|
const enc = encodeURIComponent(src);
|
|
97
108
|
const optimisedSrc = '/api/image?src=' + enc + '&w=' + maxW + '&q=' + q + '&fmt=webp';
|
|
98
109
|
const srcSet = widths.map(w => '/api/image?src=' + enc + '&w=' + w + '&q=' + q + '&fmt=webp ' + w + 'w').join(', ');
|
|
99
|
-
const imgStyle = fill
|
|
100
|
-
? Object.assign({ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }, style || {})
|
|
101
|
-
: (style || {});
|
|
102
110
|
return createElement('img', {
|
|
103
111
|
src: optimisedSrc, srcSet, sizes, alt: alt || '',
|
|
104
112
|
width: fill ? undefined : width, height: fill ? undefined : height,
|