From b43785b2f4050cd41ff1d77d197382d5ebc48154 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Tue, 8 Oct 2019 20:03:45 +0200 Subject: [PATCH 01/11] build: use mql as fetcher --- package.json | 3 ++ packages/react/src/index.js | 12 +++--- packages/react/src/utils/index.js | 65 ++++++++++--------------------- 3 files changed, 29 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 594e60d77..b18ecef3e 100644 --- a/package.json +++ b/package.json @@ -82,5 +82,8 @@ "standard-markdown", "git add" ] + }, + "dependencies": { + "@microlink/mql": "~0.5.0" } } diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 4102f841d..9e1eb47f7 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -6,8 +6,8 @@ import { CardWrap, CardMedia, CardContent, CardEmpty } from './components/Card' import { defaultApiParameters, isNil, - createApiUrl, - fetchFromApiUrl, + getApiUrl, + fetchFromApi, getUrlPath, imageProxy, someProp, @@ -51,7 +51,7 @@ function Microlink (props) { isLoadingUndefined ? true : loadingProp ) const [cardData, setCardData] = useState({}) - const apiUrl = useMemo(() => createApiUrl(props), [props]) + const [apiUrl, apiUrlProps] = useMemo(() => getApiUrl(props), [props]) const isLazyEnabled = useMemo( () => isLazySupported && (lazy === true || isObject(lazy)), @@ -73,11 +73,11 @@ function Microlink (props) { setLoading(true) const fetch = isFunction(setData) ? Promise.resolve({}) - : fetchFromApiUrl(apiUrl, props.apiKey) + : fetchFromApi(props.url, apiUrl, apiUrlProps) fetch.then(({ data }) => mergeData(data)) } - }, [apiUrl, canFetchData, setData, props.apiKey]) + }, [apiUrl, canFetchData, setData, apiUrlProps]) const mergeData = useCallback( fetchData => { @@ -202,6 +202,6 @@ Microlink.propTypes = { url: PropTypes.string } -export { imageProxy, createApiUrl, fetchFromApiUrl } +export { imageProxy, getApiUrl, fetchFromApi } export default Microlink diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js index 3ed93dfc2..28bbdded0 100644 --- a/packages/react/src/utils/index.js +++ b/packages/react/src/utils/index.js @@ -1,6 +1,5 @@ -/* global fetch */ - import { css } from 'styled-components' +import mql from '@microlink/mql' const REGEX_HTTPS = /^https/ const REGEX_LOCALHOST = /http:\/\/localhost/ @@ -31,48 +30,24 @@ export const media = { ` } -const apiValue = (key, value) => (value === true ? `${key}` : `${key}=${value}`) - -export const defaultApiParameters = { - contrast: false, - prerender: 'auto', - screenshot: false, - video: false -} - -export const createApiUrl = props => { - const { apiKey, url: targetUrl, prerender, contrast, media } = props - const takeScreenshot = media.includes('screenshot') - const hasVideo = media.includes('video') - - const alias = apiKey ? 'pro' : 'api' - let url = `https://${alias}.microlink.io/?url=${encodeURIComponent( - targetUrl - )}` - - if (hasVideo) { - url = `${url}&${apiValue('video', hasVideo)}` - } - - if (!isNil(contrast) && contrast !== defaultApiParameters.contrast) { - url = `${url}&${apiValue('palette', contrast)}` - } - - if (!isNil(prerender) && prerender !== defaultApiParameters.prerender) { - url = `${url}&${apiValue('prerender', prerender)}` - } - - if (takeScreenshot) { - url = `${url}&${apiValue('screenshot', takeScreenshot)}` - } - - return url -} - -export const fetchFromApiUrl = (apiUrl, apiKey) => { - const headers = apiKey ? { 'x-api-key': apiKey } : {} - return fetch(apiUrl, { headers }).then(res => res.json()) -} +export const getApiUrl = ({ + apiKey, + url, + prerender = 'auto', + contrast = false, + media, + ...opts +}) => + mql.getApiUrl(url, { + apiKey, + video: media.includes('video'), + screenshot: media.includes('screenshot'), + palette: contrast, + prerender, + ...opts + }) + +export const fetchFromApi = mql.fetchFromApi export const isLarge = cardSize => cardSize === 'large' @@ -80,7 +55,7 @@ export const isSmall = cardSize => cardSize === 'small' export const imageProxy = url => { if (!url || REGEX_LOCALHOST.test(url) || REGEX_HTTPS.test(url)) return url - return `https://images.weserv.nl/?url=${encodeURIComponent(url).replace( + return `https://images.weserv.nl/?url=${encodeURI(url).replace( 'http://', '' )}` From ac2a91aa3cfca49dc7a3c116d81bac8541276c36 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Tue, 8 Oct 2019 20:12:37 +0200 Subject: [PATCH 02/11] refactor: access methods directly --- packages/react/src/index.js | 23 +++++++++++++---------- packages/react/src/utils/index.js | 6 +++--- 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 9e1eb47f7..f140d6fb2 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -68,16 +68,19 @@ function Microlink (props) { [isLazyEnabled, hasIntersected] ) - const fetchData = useCallback(() => { - if (canFetchData) { - setLoading(true) - const fetch = isFunction(setData) - ? Promise.resolve({}) - : fetchFromApi(props.url, apiUrl, apiUrlProps) - - fetch.then(({ data }) => mergeData(data)) - } - }, [apiUrl, canFetchData, setData, apiUrlProps]) + const fetchData = useCallback( + () => { + if (canFetchData) { + setLoading(true) + const fetch = isFunction(setData) + ? Promise.resolve({}) + : fetchFromApi(props.url, apiUrl, apiUrlProps) + + fetch.then(({ data }) => mergeData(data)) + } + }, + [apiUrl, canFetchData, setData, apiUrlProps.headers['x-api-key']] + ) const mergeData = useCallback( fetchData => { diff --git a/packages/react/src/utils/index.js b/packages/react/src/utils/index.js index 28bbdded0..b7b95d9ce 100644 --- a/packages/react/src/utils/index.js +++ b/packages/react/src/utils/index.js @@ -1,5 +1,5 @@ import { css } from 'styled-components' -import mql from '@microlink/mql' +import { fetchFromApi, getApiUrl as createApiUrl } from '@microlink/mql' const REGEX_HTTPS = /^https/ const REGEX_LOCALHOST = /http:\/\/localhost/ @@ -38,7 +38,7 @@ export const getApiUrl = ({ media, ...opts }) => - mql.getApiUrl(url, { + createApiUrl(url, { apiKey, video: media.includes('video'), screenshot: media.includes('screenshot'), @@ -47,7 +47,7 @@ export const getApiUrl = ({ ...opts }) -export const fetchFromApi = mql.fetchFromApi +export { fetchFromApi } export const isLarge = cardSize => cardSize === 'large' From 87ad2ce1f583e23e793b7a06b07fbdde33803ccd Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Sun, 13 Oct 2019 11:16:51 +0200 Subject: [PATCH 03/11] build: tiny badge --- .../react/src/components/Card/CardContent.js | 30 +++++++------------ 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/packages/react/src/components/Card/CardContent.js b/packages/react/src/components/Card/CardContent.js index 3220ae7b7..57ebaea07 100644 --- a/packages/react/src/components/Card/CardContent.js +++ b/packages/react/src/components/Card/CardContent.js @@ -7,12 +7,11 @@ import CardText from './CardText' import { media, isLarge, isSmall, isNil } from '../../utils' const REGEX_STRIP_WWW = /^www\./ +const BADGE_WIDTH = '16px' +const BADGE_HEIGHT = '12px' const getHostname = href => { - if (isNil(href)) { - return '' - } - + if (isNil(href)) return '' const { hostname } = new URL(href) return hostname.replace(REGEX_STRIP_WWW, '') } @@ -79,11 +78,11 @@ const Footer = styled('footer')` `}; ` -const PoweredByBadge = styled('span').attrs({ title: 'microlink.io' })` +const PoweredBy = styled('span').attrs({ title: 'microlink.io' })` background: url('https://cdn.microlink.io/logo/logo.svg') no-repeat center center; display: block; - margin-left: 14px; + margin-left: 15px; transition: filter 0.15s ease, opacity 0.15s ease; &:not(:hover) { @@ -91,23 +90,16 @@ const PoweredByBadge = styled('span').attrs({ title: 'microlink.io' })` opacity: 0.75; } - ${({ cardSize }) => { - const badgeWidth = !isSmall(cardSize) ? '22px' : '18px' - const badgeHeight = !isSmall(cardSize) ? '16px' : '13px' - - return css` - min-width: ${badgeWidth}; - width: ${badgeWidth}; - background-size: ${badgeWidth}; - height: ${badgeHeight}; - ` - }} + min-width: ${BADGE_WIDTH}; + width: ${BADGE_WIDTH}; + background-size: ${BADGE_WIDTH}; + height: ${BADGE_HEIGHT}; ` export default ({ title, description, url, cardSize, className }) => { const isSmallCard = isSmall(cardSize) const formattedUrl = useMemo(() => getHostname(url), [url]) - const onPoweredByClick = useCallback(e => { + const handleOnClick = useCallback(e => { e.preventDefault() window.open('https://www.microlink.io', '_blank') }) @@ -127,7 +119,7 @@ export default ({ title, description, url, cardSize, className }) => { )}
{formattedUrl} - +
) From 6e4deb83d4168e2944440e8f00a792d116f03687 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Sun, 13 Oct 2019 11:58:05 +0200 Subject: [PATCH 04/11] fix: dependency in the right place --- package.json | 3 --- packages/react/package.json | 1 + 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index b18ecef3e..594e60d77 100644 --- a/package.json +++ b/package.json @@ -82,8 +82,5 @@ "standard-markdown", "git add" ] - }, - "dependencies": { - "@microlink/mql": "~0.5.0" } } diff --git a/packages/react/package.json b/packages/react/package.json index 46e5d2dac..e4c234c5e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -21,6 +21,7 @@ "previsualization" ], "dependencies": { + "@microlink/mql": "~0.5.0", "nanoclamp": "~1.2.11" }, "devDependencies": { From 0c848b4b90fa16fca3f8d3596deb68659525d765 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Sun, 13 Oct 2019 12:25:08 +0200 Subject: [PATCH 05/11] build: tweaks --- packages/react/package.json | 2 +- packages/react/rollup.config.js | 4 +++- packages/react/src/index.js | 25 ++++++++++--------------- 3 files changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index e4c234c5e..f7d37f538 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -21,7 +21,7 @@ "previsualization" ], "dependencies": { - "@microlink/mql": "~0.5.0", + "@microlink/mql": "~0.5.1", "nanoclamp": "~1.2.11" }, "devDependencies": { diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 707351836..cd1d5d116 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.js @@ -23,7 +23,9 @@ const getCJS = override => ({ ...cjs, ...override }) const getESM = override => ({ ...esm, ...override }) const commonPlugins = [ - nodeResolve(), + nodeResolve({ + modulesOnly: true // Default: false + }), babel({ babelrc: false, externalHelpers: false, diff --git a/packages/react/src/index.js b/packages/react/src/index.js index f140d6fb2..c7f32ed87 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -4,7 +4,6 @@ import PropTypes from 'prop-types' import { CardWrap, CardMedia, CardContent, CardEmpty } from './components/Card' import { - defaultApiParameters, isNil, getApiUrl, fetchFromApi, @@ -68,19 +67,16 @@ function Microlink (props) { [isLazyEnabled, hasIntersected] ) - const fetchData = useCallback( - () => { - if (canFetchData) { - setLoading(true) - const fetch = isFunction(setData) - ? Promise.resolve({}) - : fetchFromApi(props.url, apiUrl, apiUrlProps) + const fetchData = useCallback(() => { + if (canFetchData) { + setLoading(true) + const fetch = isFunction(setData) + ? Promise.resolve({}) + : fetchFromApi(props.url, apiUrl, apiUrlProps) - fetch.then(({ data }) => mergeData(data)) - } - }, - [apiUrl, canFetchData, setData, apiUrlProps.headers['x-api-key']] - ) + fetch.then(({ data }) => mergeData(data)) + } + }, [apiUrl, canFetchData, setData, apiUrlProps.headers['x-api-key']]) const mergeData = useCallback( fetchData => { @@ -182,8 +178,7 @@ Microlink.defaultProps = { media: ['image', 'logo'], muted: true, playsInline: true, - size: 'normal', - ...defaultApiParameters + size: 'normal' } Microlink.propTypes = { From 176443b68e73d512976e5dfc87799e0313af4b41 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Sun, 13 Oct 2019 13:44:44 +0200 Subject: [PATCH 06/11] build: remove size-limit --- packages/react/package.json | 9 --------- packages/react/rollup.config.js | 6 +++--- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 2a3f519c5..66e0be108 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -32,7 +32,6 @@ "@babel/plugin-transform-react-inline-elements": "latest", "@babel/preset-env": "latest", "@babel/preset-react": "latest", - "@size-limit/preset-small-lib": "latest", "@storybook/addon-a11y": "latest", "@storybook/addon-storyshots": "latest", "@storybook/react": "latest", @@ -77,9 +76,7 @@ "dev": "start-storybook -p 6006", "format": "prettier-standard index.js {src,stories,.storybook}/**/*.js --single-quote", "lint": "standard", - "posttest": "npm run size", "pretest": "npm run lint", - "size": "npm run build && size-limit", "start": "node scripts/start.js", "test": "jest --detectOpenHandles" }, @@ -99,12 +96,6 @@ "publishConfig": { "access": "public" }, - "size-limit": [ - { - "path": "./dist/microlink.min.js", - "limit": "10 kB" - } - ], "standard": { "globals": [ "fetch" diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 5f9557eaa..324ba6db7 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.js @@ -33,7 +33,8 @@ const commonPlugins = [ ...babelRc }), commonjs(), - filesize() + filesize(), + visualizer({ template: 'treemap' }) ] const configBase = { @@ -70,8 +71,7 @@ const prodPlugins = [ }), terser({ sourcemap: true - }), - visualizer({ template: 'treemap' }) + }) ] const standaloneProdConfig = { From c87aefa6cf8fa3224104352e37f06aa13c1b4fc3 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Sun, 13 Oct 2019 13:59:06 +0200 Subject: [PATCH 07/11] fix: vanilla bundle --- packages/vanilla/rollup.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vanilla/rollup.config.js b/packages/vanilla/rollup.config.js index 98379e444..b08f3c6d1 100644 --- a/packages/vanilla/rollup.config.js +++ b/packages/vanilla/rollup.config.js @@ -1,8 +1,8 @@ import nodeResolve from 'rollup-plugin-node-resolve' import commonjs from 'rollup-plugin-commonjs' -import replace from 'rollup-plugin-replace' import { terser } from 'rollup-plugin-terser' import filesize from 'rollup-plugin-filesize' +import replace from 'rollup-plugin-replace' const globals = { react: 'React', @@ -30,7 +30,7 @@ const standaloneBaseConfig = { sourcemap: true }, external: Object.keys(globals), - plugins: [nodeResolve(), commonjs(), filesize()] + plugins: [nodeResolve({ modulesOnly: true }), commonjs(), filesize()] } const standaloneProdConfig = { From 306df14e7845e250feac2cf25ffb446e319db73d Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Sun, 13 Oct 2019 16:56:01 +0200 Subject: [PATCH 08/11] fix: revert modulesOnly --- packages/react/rollup.config.js | 4 +--- packages/vanilla/rollup.config.js | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 324ba6db7..4feb68eaa 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.js @@ -24,9 +24,7 @@ const getCJS = override => ({ ...cjs, ...override }) const getESM = override => ({ ...esm, ...override }) const commonPlugins = [ - nodeResolve({ - modulesOnly: true // Default: false - }), + nodeResolve(), babel({ babelrc: false, externalHelpers: false, diff --git a/packages/vanilla/rollup.config.js b/packages/vanilla/rollup.config.js index b08f3c6d1..8091c0144 100644 --- a/packages/vanilla/rollup.config.js +++ b/packages/vanilla/rollup.config.js @@ -30,7 +30,7 @@ const standaloneBaseConfig = { sourcemap: true }, external: Object.keys(globals), - plugins: [nodeResolve({ modulesOnly: true }), commonjs(), filesize()] + plugins: [nodeResolve(), commonjs(), filesize()] } const standaloneProdConfig = { From 29ad651df4adea1835be193d0131811aadb63271 Mon Sep 17 00:00:00 2001 From: Kiko Beats Date: Mon, 14 Oct 2019 15:27:11 +0200 Subject: [PATCH 09/11] build: mql as global dependency --- packages/react/package.json | 7 ++- packages/react/rollup.config.js | 98 +++++++++++-------------------- packages/vanilla/index.html | 1 + packages/vanilla/package.json | 4 +- packages/vanilla/rollup.config.js | 71 ++++++++++++---------- 5 files changed, 81 insertions(+), 100 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 66e0be108..bebad0069 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -21,7 +21,7 @@ "previsualization" ], "dependencies": { - "@microlink/mql": "~0.5.1", + "@microlink/mql": "~0.5.5", "nanoclamp": "~1.2.11" }, "devDependencies": { @@ -58,7 +58,6 @@ "rollup-plugin-filesize": "latest", "rollup-plugin-node-resolve": "latest", "rollup-plugin-replace": "latest", - "rollup-plugin-terser": "latest", "rollup-plugin-visualizer": "latest", "standard": "latest", "styled-components": "latest", @@ -109,5 +108,7 @@ "plugins": [ "jsx-a11y" ] - } + }, + "umd:main": "dist/microlink.js", + "unpkg": "dist/microlink.js" } diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 4feb68eaa..a59c5cdbd 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.js @@ -1,29 +1,22 @@ import nodeResolve from 'rollup-plugin-node-resolve' import visualizer from 'rollup-plugin-visualizer' -import { terser } from 'rollup-plugin-terser' import filesize from 'rollup-plugin-filesize' import commonjs from 'rollup-plugin-commonjs' import replace from 'rollup-plugin-replace' + import babel from 'rollup-plugin-babel' import fs from 'fs' const babelRc = JSON.parse(fs.readFileSync('./.babelrc')) -const cjs = { - exports: 'named', - format: 'cjs', - sourcemap: true -} - -const esm = { - format: 'esm', - sourcemap: true +const globals = { + react: 'React', + 'react-dom': 'ReactDOM', + 'styled-components': 'styled', + '@microlink/mql': 'mql' } -const getCJS = override => ({ ...cjs, ...override }) -const getESM = override => ({ ...esm, ...override }) - -const commonPlugins = [ +const plugins = [ nodeResolve(), babel({ babelrc: false, @@ -32,61 +25,40 @@ const commonPlugins = [ }), commonjs(), filesize(), - visualizer({ template: 'treemap' }) + visualizer({ template: 'treemap' }), + replace({ + 'process.env.NODE_ENV': JSON.stringify('production') + }) ] -const configBase = { - input: './src/index.js', - // \0 is rollup convention for generated in memory modules - external: id => - !id.startsWith('\0') && !id.startsWith('.') && !id.startsWith('/'), - plugins: commonPlugins -} - -const globals = { - react: 'React', - 'react-dom': 'ReactDOM', - 'styled-components': 'styled' -} - -const standaloneBaseConfig = { - ...configBase, +const build = ({ file, format, name, exports }) => ({ input: './src/index.js', output: { - file: 'dist/microlink.js', - format: 'umd', - exports: 'named', - globals, - name: 'microlink', - sourcemap: true + file, + format, + exports, + name, + globals }, - external: Object.keys(globals) -} + external: Object.keys(globals), + plugins +}) -const prodPlugins = [ - replace({ - 'process.env.NODE_ENV': JSON.stringify('production') +export default [ + build({ + format: 'umd', + file: 'dist/microlink.js', + name: 'microlink', + exports: 'named' }), - terser({ - sourcemap: true + build({ + format: 'esm', + file: 'dist/microlink.m.js', + exports: 'named' + }), + build({ + format: 'cjs', + file: 'dist/microlink.cjs.js', + exports: 'named' }) ] - -const standaloneProdConfig = { - ...standaloneBaseConfig, - output: { - ...standaloneBaseConfig.output, - file: 'dist/microlink.min.js' - }, - plugins: standaloneBaseConfig.plugins.concat(prodPlugins) -} - -const serverConfig = { - ...configBase, - output: [ - getESM({ file: 'dist/microlink.m.js' }), - getCJS({ file: 'dist/microlink.cjs.js' }) - ] -} - -export default [standaloneProdConfig, serverConfig] diff --git a/packages/vanilla/index.html b/packages/vanilla/index.html index 927e6a018..77352d0c7 100644 --- a/packages/vanilla/index.html +++ b/packages/vanilla/index.html @@ -107,6 +107,7 @@

custom

+ - +