QQs'Note

str.replace('_','')
str.replace(/[^0-9a-zA-Z]/g,"");

restoreCodeBlocks(str) {
    return str.replace(rCodeBlockPlaceHolder, _restoreContent(this.cache));
}
const _restoreContent = cache => (_, index) => {
  assert(cache[index]);
  const value = cache[index];
  cache[index] = null;
  return value;
};

{
  "short_name": "MY APP",
  "name": "MY APP Full Name",
  "icons": [
      {
      "src": "icon/lowres.webp",
      "sizes": "48x48",
      "type": "image/webp"
    },{
      "src": "icon/lowres",
      "sizes": "48x48"
    },{
      "src": "icon/hd_hi.ico",
      "sizes": "72x72 96x96 128x128 256x256"
    },{
      "src": "icon/hd_hi.svg",
      "sizes": "257x257"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#FFB71B",
  "url": "/",
  "manifestUrl": "/manifest.json",
  "lang": "en",
  "description": "blabla",
  "scope": "."
}

if ('serviceWorker' in navigator) {
// register service worker
 navigator.serviceWorker.register('./sw.js', {scope: './'}) // 参数1：注册提供的脚本URL 参数2：导航匹配
.then(()=>{
    console.log('注册成功')
}).catch(()=>{
    console.log('注册失败')
});
}

// 缓存静态文件
self.addEventListener('install', (event) => {
    event.waitUntil(caches.open('myapp').then((cache) =>  cache.addAll(['**/*'])));
});

// 缓存接口数据
self.addEventListener('fetch', (event) => {
    event.respondWith(caches.match(event.request).then((response) => {
        // 匹配到请求
        if (response !== undefined) {
            return response;
        } else {
            return fetch(event.request).then((response) => {
                // 缓存响应数据
                let responseClone = response.clone();
                caches.open('v1').then((cache) => {
                    cache.put(event.request, responseClone);
                });
                return response;
            }).catch(() => {
                return caches.match('/gallery/myLittleVader.jpg');
            });
        }
    }));
});

// 更新缓存
self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    // 如果有更新
                    if (cacheName !== 'v1') {
                        return caches.delete(cacheName);
                    }
                })
            );
        }).then(function(){
            return self.clients.claim()
        })
    );
});

npx create-react-app my-app --template cra-template-pwa

yarn add react-intl
yarn add -D @formatjs/ts-transformer

import * as React from 'react'
import {IntlProvider, FormattedMessage, FormattedNumber} from 'react-intl'

<IntlProvider messages={messagesInFrench} locale="fr" defaultLocale="en">
    <p>
    <FormattedMessage
        id="myMessage"
        defaultMessage="Today is {ts, date, ::yyyyMMdd}"
        values={{ts: Date.now()}}
    />
    <br />
    <FormattedNumber value={19} style="currency" currency="EUR" />
    </p>
</IntlProvider>

yarn add -D @formatjs/cli

"extract": "formatjs extract"

yarn extract 'src/**/*.ts*' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'
或
npm run extract -- 'src/**/*.ts*' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'

"compile": "formatjs compile"

yarn compile lang/fr.json --ast --out-file compiled-lang/fr.json
或
npm run compile -- lang/fr.json --ast --out-file compiled-lang/fr.json

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import {IntlProvider} from 'react-intl'

function loadLocaleData(locale: string) {
  switch (locale) {
    case 'fr':
      return import('compiled-lang/fr.json')
    default:
      return import('compiled-lang/en.json')
  }
}

function App(props) {
  return (
    <IntlProvider
      locale={props.locale}
      defaultLocale="en"
      messages={props.messages}
    >
      <MainApp />
    </IntlProvider>
  )
}

async function bootstrapApplication(locale, mainDiv) {
  const messages = await loadLocaleData(locale)
  ReactDOM.render(<App locale={locale} messages={messages} />, mainDiv)
}

const intl = useIntl()
return (
  <span title={intl.formatDate(date)}>
    <FormattedDate value={date} />
  </span>
)

dragAreaSupportTip(format: string) {
  const messages = defineMessages({
    supportTip: {
      id: 'dragArea.supportTip',
      defaultMessage: 'Only supports {format} files',
    },
  })
  return intl.formatMessage(messages.supportTip, { format });
}

translateEnums(name:string){
  name = name.replace(/ /g, '_')
  const messages = defineMessages({
    transName: {
      id: 'enums.name',
      defaultMessage: `{name, select,
        dog {dog}
        cat {cat}
        King_Kong {King Kong}
        other {{name}}
      }`,
    },
  })
  const translatedName = this.intl.formatMessage(messages.transName, { name:name });
  return translatedName.replace(/_/g, ' ')
}

npm install @material-ui/system@next @emotion/react @emotion/styled

const StatHeader = styled('div')(z
  ({ theme }) => `
  color: blue;
`,
);

...
return (
  <StatHeader>font color is blue here</StatHeader>
)

return (
   <Box sx={{ color: 'text.secondary' }}>this color is blue here</Box>
)

$qqs-design:(
    50: #e7f6f9,
    100: #c3e7ef,
    200: #9bd8e4,
    300: #72c8d9,
    400: #54bcd1,
    500: #36b0c9,
    600: #30a9c3,
    700: #29a0bc,
    800: #2297b5,
    900: #1687a9,
    A100: #dcf6ff,
    A200: #a9e9ff,
    A400: #76ddff,
    A700: #5dd6ff,
    contrast: (
      50: #262626,
      100: #262626,
      200: #262626,
      300: white,
      400: white,
      500: white,
      600: white,
      A100: #262626,
      A200: white,
      A400: white,
      A700: white
    )
);

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
@import 'theme.scss';
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$CSDPartnerPortal-primary: mat-palette($csd2021);
$CSDPartnerPortal-accent: mat-palette($csd2021, 500, A100, A400);

// The warn palette is optional (defaults to red).
$CSDPartnerPortal-warn: mat-palette($mat-red);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$CSDPartnerPortal-theme: mat-light-theme((
  color: (
    primary: $CSDPartnerPortal-primary,
    accent: $CSDPartnerPortal-accent,
    warn: $CSDPartnerPortal-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($CSDPartnerPortal-theme);

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
</style>

grid-template-columns: 200px 500px 100px;
grid-template-columns: repeat(4, 25%);
grid-template-columns: 200px repeat(3, 1fr) 100px;

grid-gap: 5px;
grid-row-gap: 5px;
grid-column-gap: 5px;

grid-template-columns: repeat(auto-fill, 200px);

grid-template-columns: 1fr 1fr minmax(300px, 2fr)

grid-auto-flow: row;
grid-auto-flow: row dense;
grid-auto-flow: column;

grid-template-columns: 200px 500px 100px;
grid-template-rows: 100px 100px;
grid-auto-rows: 50px;

.item {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

<style>
    .toggle-btn {
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        color: #000;
        background: #ccc;
    }

    .toggle-btn>input {
        width: 0;
        height: 0;
        opacity: 0;
    }

    .toggle-btn>svg {
        width: 100%;
        height: 100%;
    }

    input:checked+svg circle {
        fill: blue
    }
</style>
<label class="toggle-btn">
    <input type="checkbox">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="20" cy="20" r="20" stroke="black" stroke-width="2" fill="none" />
    </svg>
</label>

import MyIcon from '-!svg-react-loader!../../assets/image/icon.svg'
...
return (<> <MyIcon> <>)

import MyIcon from '../../assets/image/icon.svg'
...
return (<img src={MyIcon} />)

import {ReactComponent as MyIcon} from '../../assets/image/icon.svg'
...
return (<div style={{color:'red', cursor: 'pointer'}}>
    <MyIcon />
</div>)

import { InlineSVGModule } from 'ng-inline-svg'

@NgModule({
    imports: [...LibModules,
        InlineSVGModule.forRoot()],
    exports: [...MuiModules],
    declarations:  [],
    providers: [],
})
export class SharedModule { }

<div [inlineSVG]="'assets/image/icon.svg'"></div>

async function practise() {
    console.log('训练开始...')
    let result;
    result = await warmup(2)
    if(result) console.log('热身完成。。')
    result = await squat(5)
    if(result) console.log('深蹲完成。。')
    result = await boating(3)
    if(result) console.log('划船完成。。')
}

function warmup(time){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
        }, time*1000);
    });
}

function squat(time){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
        }, time*1000);
    });
}

function boating(time){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
        }, time*1000);
    });
}

// 执行这个‘训练’
practise().then(res=>{
    console.log('完了')
})

function* practisePlan() {
    yield warmup(2)
    yield squat(5)
    yield boating(3)
}

let practise = function () {
    return new Promise((resolve, reject)=>{
        const plan = practisePlan()
        Promise.resolve(plan.next().value).then(result=>{
            if(result) console.log('热身完成。。')
            return plan.next().value;
        }).then(result=>{
            if(result) console.log('深蹲完成。。')
            return plan.next().value;
        }).then(result=>{
            if(result) console.log('划船完成。。')
            resolve() // <--完了
        })
    })
}