@fullstackunicorn/create-root 1.0.29 → 2.0.0

package/assets/root.fullstackunicorn.dev/frontend/imports/client.js

@@ -1,260 +0,0 @@
-import { axios } from '#@/imports/npm'
-import { constants } from '#@/root/constants.js'
-import { abs } from '#@/abstracts/abs.js'
-import { err } from '#@/abstracts/err.js'
-import { cache } from '#@/imports/cache.js'
-
-class Client {
-
-    constructor() {
-        this.cacheNameObjects = 'cache-objects'
-        this.cacheNameFiles = 'cache-files'
-        this.cacheNameImg = 'cache-img'
-        this.cacheStale = constants.cache.stale
-    }
-
-    validate = ({ response = {}, is = {} }) => {
-        if (!F3.obj.isGood(response)) return { isError: true, error: 'no-response' }
-        if (F3.err.is400(response.status)) return { isError: true, error: 'client-error' }
-        if (F3.err.is500(response.status)) return { isError: true, error: 'server-error' }
-        if (F3.isNil(response.data)) return { isError: true, error: 'no-data' }
-        if (is.graphQl) {
-            if (F3.arr.isGood(response.data?.errors)) return { isError: true, error: 'graphql-error' }
-            if (F3.isNil(response.data?.data)) return { isError: true, error: 'graphql-no-data' }
-        }
-        return { isValid: true }
-    }
-
-    post = async (endpoint, data, headers) => {
-        try {
-            const response = await axios.post(endpoint, data, headers)
-            const validated = this.validate({ response, is: { post: true } })
-            if (!validated.isValid) return validated
-            return response.data
-        } catch (error) { return await err.handle(error) }
-    }
-
-    graphQl = async (payload = {}, isNoCache) => {
-        if (isNoCache) return await this.directGraphQl(payload)
-        return await this.cacheGraphQl(payload)
-    }
-
-    data = async (payload = {}, isNoCache) => {
-        const isGet = payload.method === 'get'
-        if (isNoCache) return await this.directData(payload, isGet)
-        return await this.cacheData(payload, isGet)
-    }
-
-    file = async (payload = {}, isNoCache) => {
-        const isGet = payload.method === 'get'
-        // const params = isGet ? payload.config?.params : payload.data
-        const params = isGet ? undefined : payload.data
-        payload.key = abs.makeKey(payload.endpoint, payload.method, params)
-        if (isNoCache) return await this.directFile(payload, isGet)
-        return await this.cacheFile(payload, isGet)
-    }
-
-    image = async (payload = {}, type) => {
-
-        payload.method = 'get'
-        payload.key = abs.makeKey(payload.endpoint, payload.method)
-
-        if (type === 'get') return await this.cacheImgGet(payload)
-        if (type === 'set') return await this.cacheImgSet(payload)
-
-    }
-
-    directGraphQl = async ({ key, method, endpoint, data, config = {} }, isGet) => {
-
-    }
-
-    directData = async ({ key, method, endpoint, data, config = {} }, isGet) => {
-        try {
-            const response = isGet
-                ? await axios.get(endpoint, config)
-                : await axios[method](endpoint, data, config)
-            const validated = this.validate({ response, key })
-            if (!validated.isValid) return validated
-            return response.data
-        } catch (error) { return await err.handle(error) }
-    }
-
-    directFile = async ({ key, method, endpoint, config = {} }, isGet) => {
-        try {
-            config.responseType = 'arraybuffer'
-            config.timeout = 10000
-            const response = isGet
-                ? await axios.get(endpoint, config)
-                : await axios[method](endpoint, data, config)
-            const validated = this.validate({ response })
-            if (!validated.isValid) return validated
-            const blob = cache.getBlob(response.data, response.headers['content-type'])
-            return { key, blob }
-        } catch (error) { return await err.handle(error) }
-    }
-
-    cacheGraphQl = async ({ key, method, endpoint, data = {}, config = {} }, isGet) => {
-
-    }
-
-    cacheData = async ({ key, method, endpoint, data = {}, config = {} }, isGet) => {
-
-        const cacheStore = await cache.open(this.cacheNameObjects)
-        const cachedItem = await cache.get(cacheStore, key, false)
-        const cachedResponse = cachedItem ? { key, data: cachedItem } : undefined
-        const { etag, timestamp } = await cache.getMeta(key)
-
-        const age = (Date.now() - timestamp) / 1000
-        const isFresh = cachedItem && age < this.cacheStale
-        if (isFresh) return cachedResponse
-
-        config.timeout = 10000
-        if (etag && cachedItem) {
-            if (!config.headers) config.headers = {}
-            config.headers['If-None-Match'] = etag
-        }
-
-        try {
-
-            const response = isGet
-                ? await axios.get(endpoint, config)
-                : await axios[method](endpoint, data, config)
-
-            if (cachedItem && response.status === 304) {
-                await cache.setMeta(key, response.headers['etag'] || etag)
-                return cachedResponse
-            }
-
-            const validated = this.validate({ response, key })
-            if (!validated.isValid) return validated
-
-            await cache.set(cacheStore, key, response.data, false)
-            await cache.setMeta(key, response.headers['etag'])
-
-            return { key, data: response.data }
-
-        } catch (error) { return await err.cache(error, cachedResponse) }
-    }
-
-    cacheImgGet = async ({ key }) => {
-
-        const cacheStore = await cache.open(this.cacheNameImg)
-        const cachedBlob = await cache.get(cacheStore, key, true)
-        if (!cachedBlob?.size) return null
-        return { key, blob: cachedBlob, isCached: true }
-
-    }
-
-    cacheImgSet = async ({ key, endpoint, config = {} }) => {
-        const cacheStore = await cache.open(this.cacheNameImg)
-        const cachedBlob = await cache.get(cacheStore, key, true)
-        const cachedResponse = cachedBlob?.size ? { key, blob: cachedBlob, isCached: true } : undefined
-        const { etag, timestamp } = await cache.getMeta(key)
-
-        const age = (Date.now() - timestamp) / 1000
-        const isFresh = cachedResponse && age < this.cacheStale
-        if (isFresh) return { ...cachedResponse, isFresh: true }
-
-        config.responseType = 'arraybuffer'
-        config.timeout = 10000
-
-        if (etag && cachedResponse) {
-            if (!config.headers) config.headers = {}
-            config.headers['If-None-Match'] = etag
-        }
-
-        try {
-            const response = await axios.get(endpoint, config)
-
-            if (cachedResponse && response.status === 304) {
-                await cache.setMeta(key, response.headers['etag'] || etag)
-                return { ...cachedResponse, isRevalidated: true }
-            }
-
-            const blob = cache.getBlob(response.data, response.headers['content-type'])
-            await cache.set(cacheStore, key, blob, true)
-            await cache.setMeta(key, response.headers['etag'])
-
-            return { key, blob, isUpdated: true }
-
-        } catch (error) {
-            if (error?.code === 'ERR_CANCELED' || config.signal?.aborted) return cachedResponse || { isCanceled: true }
-            return await err.cache(error, cachedResponse)
-        }
-    }
-
-    cacheFile = async ({ key, method, endpoint, data = {}, config = {} }, isGet) => {
-
-        const cacheStore = await cache.open(this.cacheNameFiles)
-        const cachedBlob = await cache.get(cacheStore, key, true)
-        const cachedResponse = cachedBlob?.size ? { key, blob: cachedBlob } : undefined
-        const { etag, timestamp } = await cache.getMeta(key)
-
-        const age = (Date.now() - timestamp) / 1000
-        const isFresh = cachedResponse && age < this.cacheStale
-        if (isFresh) return cachedResponse
-
-        config.responseType = 'arraybuffer'
-        config.timeout = 10000
-
-        if (etag && cachedResponse) {
-            if (!config.headers) config.headers = {}
-            config.headers['If-None-Match'] = etag
-        }
-
-        try {
-            const response = isGet
-                ? await axios.get(endpoint, config)
-                : await axios[method](endpoint, data, config)
-
-            if (cachedResponse && response.status === 304) {
-                await cache.setMeta(key, response.headers['etag'] || etag)
-                return cachedResponse
-            }
-
-            const blob = cache.getBlob(response.data, response.headers['content-type'])
-            await cache.set(cacheStore, key, blob, true)
-            await cache.setMeta(key, response.headers['etag'])
-
-            return { key, blob }
-
-        } catch (error) { return await err.cache(error, cachedResponse) }
-    }
-
-    cacheRemove = async ({ method, endpoint, cacheName }) => {
-        const key = `${method}:${endpoint}`
-        const cacheStore = await cache.open(cacheName)
-        await cache.remove(cacheStore, key)
-    }
-
-    cacheClear = async (cacheName) => await cache.clear(cacheName)
-
-    cachePreloadGet = async (items = []) => {
-
-        if (!F3.arr.isGood(items)) return
-
-        const cacheStore = await cache.open(this.cacheNameObjects)
-
-        for (const item of items) {
-
-            if (!F3.obj.isGood(item)) continue
-
-            const { url, etag, data } = item
-
-            if (!F3.str.isGood(url)) continue
-            if (!F3.str.isGood(etag)) continue
-
-            if (F3.isArr(data)) { if (!F3.arr.isGood(data)) continue } 
-            else if (F3.isObj(data)) { if (!F3.obj.isGood(data)) continue } 
-            else { if (!F3.res.isGood(data)) continue }
-
-            const method = 'get'
-            const key = abs.makeKey(url, method)
-
-            await cache.set(cacheStore, key, data, false)
-            await cache.setMeta(key, etag)
-        }
-    }
-}
-
-export const client = new Client()

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Backdrop.js

@@ -1,21 +0,0 @@
-export const Backdrop = ({ 
-    classes=[], inline={}, children, 
-    onPress=()=>{}, setIsHover=()=>{} }) => {
-    return (
-        <div className={classes.join(' ')} style={inline}
-            onClick={e => { e.stopPropagation(); return onPress()}} 
-            onMouseEnter={() => setIsHover(true)}
-            onMouseLeave={() => setIsHover(false)}
-        >
-            {children}
-        </div>
-    )
-}
-
-export const Modal = ({ classes=[], inline={}, children }) => {
-    return (
-        <div className={classes.join(' ')} style={inline} onClick={e => { e.stopPropagation()}}>
-            {children}
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Background.js

@@ -1,21 +0,0 @@
-
-import { abs } from '#@/abstracts/abs.js' 
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { BackgroundPod } from './Background.pod.js'
-
-export const Background = ({ classes, inline, children }) => {
-
-    const statics = useGetStatics()
-    const picture = statics.visual.base.background
-    const image = abs.getImage(picture)
-
-    return (
-        <BackgroundPod 
-            {...{classes, inline}} 
-            src={image.src} 
-            ratio={image.ratio}
-        >
-            {children}
-        </BackgroundPod>
-    ) 
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Background.pod.js

@@ -1,20 +0,0 @@
-import { useStyle } from '#@/style/@use'
-
-export const BackgroundPod = ({ classes=[], inline={}, src={}, ratio=1, children }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-    
-    S.img = [...classes]
-    I.img = { 
-        objectFit:'cover', 
-        background:`url(${src})`, 
-        aspectRatio:ratio,
-        ...inline
-    }
-
-    return (
-        <div className={S.img.join(' ')} style={I.img}>
-            {children}
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Href.js

@@ -1,22 +0,0 @@
-import { useNavigateUrl } from '#@/imports/router'
-import { View } from '#@/imports/core/View'
-import { Pressable } from '#@/imports/core/Pressable'
-
-export const Href = ({ classes, inline, children, linkTo, isView }) => {
-
-    const navigateUrl = useNavigateUrl()
-
-    const onPress = () => navigateUrl(linkTo)
-
-    if (isView) return (
-        <View classes={classes} inline={inline}>
-            {children}
-        </View>
-    )
-
-    return ( 
-        <Pressable classes={classes} inline={inline} onPress={onPress}>
-            {children}
-        </Pressable>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Iframe.js

@@ -1,13 +0,0 @@
-export const Iframe = ({ classes=[], inline={}, width, height, src, title, onLoad=()=>{}, onError=()=>{} }) => {
-    return (
-        <iframe className={classes.join(' ')} style={inline}
-            width={width} 
-            height={height}
-            src={src} 
-            title={title}
-            allowFullScreen
-            onLoad={onLoad}
-            onError={onError}
-        ></iframe>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Img.js

@@ -1,140 +0,0 @@
-import { useState, useEffect } from 'react'
-import { img } from '#@/abstracts/img.js'
-import { useGetStatics } from '#@/base/statics/@use.js'
-import { ImgPod, ImgDataPod, NoImgPod } from './Img.pod.js'
-import { api } from '#@/client/@api.js'
-
-export const ImgData = (props) => <ImgDataPod {...props} />
-
-const inFlightImages = new Map()
-
-const retainImageRequest = (src) => {
-    let entry = inFlightImages.get(src)
-
-    if (!entry) {
-        const controller = new AbortController()
-        const promise = api.statics.image(src, 'set', { signal: controller.signal })
-            .finally(() => inFlightImages.delete(src))
-
-        entry = { controller, promise, retainers: 0 }
-        inFlightImages.set(src, entry)
-    }
-
-    let released = false
-    entry.retainers += 1
-
-    const release = () => {
-        if (released) return
-        released = true
-
-        entry.retainers = Math.max(0, entry.retainers - 1)
-        if (entry.retainers === 0) entry.controller.abort()
-    }
-
-    return { promise: entry.promise, release }
-}
-
-export const NoImg = (props) => {
-    const statics = useGetStatics()
-    return <NoImgPod {...props} svg={statics.visual.svg.picture} />
-}
-
-export const Img = ({ classes, inline, picture = {} }) => {
-    const image = img.getImage(picture)
-
-    const [src, setSrc] = useState()
-    const [isLoaded, setIsLoaded] = useState(false)
-    const [isSlow, setIsSlow] = useState(false)
-
-    useEffect(() => {
-        if (image.isNoImage || !image.src) return
-
-        let mounted = true
-        let objectUrl = null
-        let slowTimer = null
-        let releaseRequest = null
-
-        setSrc(undefined)
-        setIsLoaded(false)
-        setIsSlow(false)
-
-        slowTimer = setTimeout(() => {
-            if (mounted) setIsSlow(true)
-        }, 150)
-
-        const setBlob = (blob) => {
-            clearTimeout(slowTimer)
-            if (objectUrl) URL.revokeObjectURL(objectUrl)
-            objectUrl = URL.createObjectURL(blob)
-            setSrc(objectUrl)
-            setIsLoaded(true)
-            setIsSlow(false)
-        }
-
-        const fetchImage = async ({ updateOnly = false } = {}) => {
-            const request = retainImageRequest(image.src)
-            releaseRequest = request.release
-
-            const fetched = await request.promise
-            releaseRequest()
-            releaseRequest = null
-
-            if (fetched?.isCanceled) return fetched
-            if (!mounted) return fetched
-            if (!fetched?.blob) return fetched
-            if (updateOnly && !fetched.isUpdated) return fetched
-
-            setBlob(fetched.blob)
-            return fetched
-        }
-
-        const load = async () => {
-            const cached = await api.statics.image(image.src, 'get')
-
-            if (mounted && cached?.blob) {
-                setBlob(cached.blob)
-                fetchImage({ updateOnly: true })
-                return
-            }
-
-            const fetched = await fetchImage()
-            if (fetched?.isCanceled) return
-
-            if (mounted && fetched?.blob) {
-                return
-            }
-
-            if (mounted) {
-                clearTimeout(slowTimer)
-                setSrc(image.src)
-                const temp = new Image()
-                temp.onload = () => mounted && setIsLoaded(true)
-                temp.onerror = () => mounted && setIsLoaded(true)
-                temp.src = image.src
-            }
-        }
-
-        load()
-
-        return () => {
-            mounted = false
-            clearTimeout(slowTimer)
-            if (releaseRequest) releaseRequest()
-            if (objectUrl) URL.revokeObjectURL(objectUrl)
-        }
-    }, [image.src])
-
-    if (image.isNoImage) return <NoImg {...{ classes, inline }} />
-
-    return (
-        <ImgPod
-            {...{ classes, inline }}
-            src={src}
-            placeholder={image.placeholder}
-            alt={image.alt}
-            ratio={image.ratio}
-            isLoaded={isLoaded}
-            isSlow={isSlow}
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/Img.pod.js

@@ -1,69 +0,0 @@
-import { useStyle } from '#@/style/@use'
-import { Blurhash } from '#@/imports/npm'
-import { Svg } from '#@/imports/core/Svg'
-import { View } from '#@/imports/core/View'
-
-export const ImgDataPod = ({ classes=[], inline={}, onPress, setIsHover, src, alt }) => {
-    
-    return (
-        <View classes={classes} inline={{overflow:'hidden', ...inline}} onPress={onPress} setIsHover={setIsHover}>
-            <img style={{width:'100%', height:'100%'}} src={src} alt={alt}/>
-        </View>
-    )
-}
-
-export const NoImgPod = ({ classes, inline, svg }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    S.box = [...classes, c.base_NN_W700]
-    S.svg = [s.XY100p, c.item_NN_W750]
-
-    return (
-        <View classes={S.box} inline={inline}>
-            <Svg classes={S.svg} svg={svg} />
-        </View>
-    )
-}
-
-export const ImgPod = ({
-    classes = [], inline = {}, src, alt = '', ratio = 1,
-    isLoaded, isSlow, placeholder }) => {
-
-    const { s, c, f, t, F, B, S, I, H } = useStyle()
-
-    B.imgOpacity = !isLoaded ? [s.opacity0] : []
-    B.blurhashOpacity = isLoaded ? [s.opacity0] : []
-    B.imgTransition = isSlow ? { transition: '0.3s all ease-in-out', ...inline } : { ...inline }
-    B.blurhashTransition = { transition: '0.3s all ease-in-out' }
-
-    S.image = [s.positionRelative, s.overflowHidden, s.row_cXcY, ...classes]
-    S.blurhash = [s.positionAbsolute, s.XY100p, ...B.blurhashOpacity]
-    S.box = [s.positionAbsolute, s.XY100p, s.row_cXcY]
-    S.img = [...B.imgOpacity, ...classes]
-
-    I.image = { objectFit: 'cover', aspectRatio: ratio, ...inline }
-    I.img = B.imgTransition
-    I.blurhash = B.blurhashTransition
-
-    return (
-        <div className={S.image.join(' ')} style={I.image}>
-            {isSlow && <div className={S.blurhash.join(' ')} style={I.blurhash}>
-                <Blurhash
-                    hash={placeholder}
-                    width={'100%'}
-                    height={'100%'}
-                    resolutionX={32}
-                    resolutionY={32}
-                    punch={1}
-                />
-            </div>}
-            <div className={S.box.join(' ')}>
-                <img className={S.img.join(' ')} style={I.img}
-                    src={src}
-                    alt={alt}
-                />
-            </div>
-        </div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/InputFile.js

@@ -1,26 +0,0 @@
-import { useRef } from 'react'
-
-export const InputFile = ({ classes=[], inline={}, children, setFiles }) => {
-
-    const ref = useRef()
-    const onClick = () => ref.current.click()
-    const onChange = async (event) => {
-        const files = event.target.files
-        setFiles(files)
-    }
-
-    return (
-        <>
-            <input 
-                type="file" 
-                ref={ref}
-                multiple 
-                onChange={onChange} 
-                style={{display:'none'}}
-            />
-            <div className={classes.join(' ')} style={inline} onClick={onClick}>
-                {children}
-            </div>
-        </>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/InputTextItem.js

@@ -1,23 +0,0 @@
-import { useGetFont } from '#@/imports/fonts/use'
-
-export const InputTextItem = ({ 
-    classes=[], value='', font = 'f1', language,
-    onChange=()=>{}, onFocus=()=>{}, onBlur=()=>{}, 
-    name, placeholder, placeholderColor }) => {
-
-    const fontClass = useGetFont(font, language)    
-    const className = [...classes, fontClass].join(' ')
-
-    return (
-        <input 
-            value={value}
-            onChange={e=>onChange(name, e.target.value)}
-            type='text'
-            className={className} 
-            placeholder={placeholder}
-            onFocus={onFocus}
-            onBlur={onBlur}
-
-        />
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/InputTextarea.js

@@ -1,39 +0,0 @@
-import { useState } from 'react'
-import { useGetFont } from '#@/imports/fonts/use'
-// never tested
-
-export const InputTextarea = ({ 
-    classes=[], value='', font = 'f1', language,
-    setValue=()=>{}, onFocus=()=>{}, onBlur=()=>{}, 
-    borderC, borderN, placeholder, placeholderColor }) => {
-
-    const [height, setHeight] = useState(24)
-    const [border, setBorder] = useState(borderC)
-
-    const handleContentSize = event => {
-        let newHeight = event.nativeEvent.contentSize.height;
-        if (event.nativeEvent.contentSize.height < height) newHeight = height - 24;
-        setHeight(newHeight)
-    }
-
-    const handleChange = event => setValue(event.target.value)
-    const handleFocus = setBorder(borderC)
-    const handleBlur = setBorder(borderN)
-
-    const fontClass = useGetFont(font, language)    
-    const className = [...classes, fontClass].join(' ')
-
-    return (
-        <div
-            // multiline
-            // value={value}
-            // style={[...classes, border, {height}]} 
-            // onContentSizeChange={handleContentSize}
-            // placeholder={placeholder}
-            // placeholderTextColor={placeholderColor}
-            // onChange={handleChange}
-            // onFocus={handleFocus}
-            // onBlur={handleBlur}
-        ></div>
-    )
-}

package/assets/root.fullstackunicorn.dev/frontend/imports/core/InputTextline.js

@@ -1,23 +0,0 @@
-import { useGetFont } from '#@/imports/fonts/use'
-
-export const InputTextline = ({ 
-    classes=[], value='', font = 'f1', language,
-    setValue=()=>{}, onFocus=()=>{}, onBlur=()=>{}, 
-    type, inputRef, placeholder }) => {
-
-    const fontClass = useGetFont(font, language)    
-    const className = [...classes, fontClass].join(' ')
-
-    return (
-        <input  
-            ref={inputRef}
-            value={value}
-            onChange={e=>setValue(e.target.value)}
-            type={type}
-            className={className} 
-            placeholder={placeholder}
-            onFocus={onFocus}
-            onBlur={onBlur}
-        />
-    )
-}