@payloadcms/plugin-seo 3.0.0-beta.35 → 3.0.0-beta.36

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.
Files changed (15) hide show
  1. package/dist/fields/MetaDescription.js +88 -61
  2. package/dist/fields/MetaDescription.js.map +1 -1
  3. package/dist/fields/MetaImage.js +89 -66
  4. package/dist/fields/MetaImage.js.map +1 -1
  5. package/dist/fields/MetaTitle.js +89 -61
  6. package/dist/fields/MetaTitle.js.map +1 -1
  7. package/dist/ui/LengthIndicator.js +61 -40
  8. package/dist/ui/LengthIndicator.js.map +1 -1
  9. package/dist/ui/Overview.js +10 -6
  10. package/dist/ui/Overview.js.map +1 -1
  11. package/dist/ui/Pill.js +7 -3
  12. package/dist/ui/Pill.js.map +1 -1
  13. package/dist/ui/Preview.js +55 -34
  14. package/dist/ui/Preview.js.map +1 -1
  15. package/package.json +16 -11
package/dist/fields/MetaDescription.js CHANGED
@@ -1,4 +1,5 @@
1
1
  'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { TextareaInput } from '@payloadcms/ui/fields/Textarea';
3
4
  import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
4
5
  import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
@@ -47,70 +48,96 @@ export const MetaDescription = (props)=>{
47
48
  locale,
48
49
  docInfo
49
50
  ]);
50
- return /*#__PURE__*/ React.createElement("div", {
51
+ return /*#__PURE__*/ _jsxs("div", {
51
52
  style: {
52
53
  marginBottom: '20px'
53
- }
54
- }, /*#__PURE__*/ React.createElement("div", {
55
- style: {
56
- marginBottom: '5px',
57
- position: 'relative'
58
- }
59
- }, /*#__PURE__*/ React.createElement("div", {
60
- className: "plugin-seo__field"
61
- }, /*#__PURE__*/ React.createElement(FieldLabel, {
62
- CustomLabel: CustomLabel,
63
- label: label,
64
- ...labelProps || {}
65
- }), hasGenerateDescriptionFn && /*#__PURE__*/ React.createElement(React.Fragment, null, "  —  ", /*#__PURE__*/ React.createElement("button", {
66
- onClick: regenerateDescription,
67
- style: {
68
- background: 'none',
69
- backgroundColor: 'transparent',
70
- border: 'none',
71
- color: 'currentcolor',
72
- cursor: 'pointer',
73
- padding: 0,
74
- textDecoration: 'underline'
75
54
  },
76
- type: "button"
77
- }, t('plugin-seo:autoGenerate')))), /*#__PURE__*/ React.createElement("div", {
78
- style: {
79
- color: '#9A9A9A'
80
- }
81
- }, t('plugin-seo:lengthTipDescription', {
82
- maxLength,
83
- minLength
84
- }), /*#__PURE__*/ React.createElement("a", {
85
- href: "https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions",
86
- rel: "noopener noreferrer",
87
- target: "_blank"
88
- }, t('plugin-seo:bestPractices')))), /*#__PURE__*/ React.createElement("div", {
89
- style: {
90
- marginBottom: '10px',
91
- position: 'relative'
92
- }
93
- }, /*#__PURE__*/ React.createElement(TextareaInput, {
94
- CustomError: errorMessage,
95
- onChange: setValue,
96
- path: pathFromContext,
97
- required: required,
98
- showError: showError,
99
- style: {
100
- marginBottom: 0
101
- },
102
- value: value
103
- })), /*#__PURE__*/ React.createElement("div", {
104
- style: {
105
- alignItems: 'center',
106
- display: 'flex',
107
- width: '100%'
108
- }
109
- }, /*#__PURE__*/ React.createElement(LengthIndicator, {
110
- maxLength: maxLength,
111
- minLength: minLength,
112
- text: value
113
- })));
55
+ children: [
56
+ /*#__PURE__*/ _jsxs("div", {
57
+ style: {
58
+ marginBottom: '5px',
59
+ position: 'relative'
60
+ },
61
+ children: [
62
+ /*#__PURE__*/ _jsxs("div", {
63
+ className: "plugin-seo__field",
64
+ children: [
65
+ /*#__PURE__*/ _jsx(FieldLabel, {
66
+ CustomLabel: CustomLabel,
67
+ label: label,
68
+ ...labelProps || {}
69
+ }),
70
+ hasGenerateDescriptionFn && /*#__PURE__*/ _jsxs(React.Fragment, {
71
+ children: [
72
+ "  —  ",
73
+ /*#__PURE__*/ _jsx("button", {
74
+ onClick: regenerateDescription,
75
+ style: {
76
+ background: 'none',
77
+ backgroundColor: 'transparent',
78
+ border: 'none',
79
+ color: 'currentcolor',
80
+ cursor: 'pointer',
81
+ padding: 0,
82
+ textDecoration: 'underline'
83
+ },
84
+ type: "button",
85
+ children: t('plugin-seo:autoGenerate')
86
+ })
87
+ ]
88
+ })
89
+ ]
90
+ }),
91
+ /*#__PURE__*/ _jsxs("div", {
92
+ style: {
93
+ color: '#9A9A9A'
94
+ },
95
+ children: [
96
+ t('plugin-seo:lengthTipDescription', {
97
+ maxLength,
98
+ minLength
99
+ }),
100
+ /*#__PURE__*/ _jsx("a", {
101
+ href: "https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions",
102
+ rel: "noopener noreferrer",
103
+ target: "_blank",
104
+ children: t('plugin-seo:bestPractices')
105
+ })
106
+ ]
107
+ })
108
+ ]
109
+ }),
110
+ /*#__PURE__*/ _jsx("div", {
111
+ style: {
112
+ marginBottom: '10px',
113
+ position: 'relative'
114
+ },
115
+ children: /*#__PURE__*/ _jsx(TextareaInput, {
116
+ CustomError: errorMessage,
117
+ onChange: setValue,
118
+ path: pathFromContext,
119
+ required: required,
120
+ showError: showError,
121
+ style: {
122
+ marginBottom: 0
123
+ },
124
+ value: value
125
+ })
126
+ }),
127
+ /*#__PURE__*/ _jsx("div", {
128
+ style: {
129
+ alignItems: 'center',
130
+ display: 'flex',
131
+ width: '100%'
132
+ },
133
+ children: /*#__PURE__*/ _jsx(LengthIndicator, {
134
+ maxLength: maxLength,
135
+ minLength: minLength,
136
+ text: value
137
+ })
138
+ })
139
+ ]
140
+ });
114
141
  };
115
142
 
116
143
  //# sourceMappingURL=MetaDescription.js.map
package/dist/fields/MetaDescription.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/fields/MetaDescription.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { FieldType, Options } from '@payloadcms/ui/forms/useField'\n\nimport { TextareaInput } from '@payloadcms/ui/fields/Textarea'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\nimport type { GenerateDescription } from '../types.js'\n\nimport { defaults } from '../defaults.js'\nimport { LengthIndicator } from '../ui/LengthIndicator.js'\n\nconst { maxLength, minLength } = defaults.description\n\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaDescriptionProps = FormFieldBase & {\n hasGenerateDescriptionFn: boolean\n path: string\n}\n\nexport const MetaDescription: React.FC<MetaDescriptionProps> = (props) => {\n const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, path, required } = props\n const { path: pathFromContext } = useFieldProps()\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const field: FieldType<string> = useField({\n path,\n } as Options)\n\n const { errorMessage, setValue, showError, value } = field\n\n const regenerateDescription = useCallback(async () => {\n if (!hasGenerateDescriptionFn) return\n\n const genDescriptionResponse = await fetch('/api/plugin-seo/generate-description', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...fields },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateDescription>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedDescription } = await genDescriptionResponse.json()\n\n setValue(generatedDescription || '')\n }, [fields, setValue, hasGenerateDescriptionFn, locale, docInfo])\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n <FieldLabel CustomLabel={CustomLabel} label={label} {...(labelProps || {})} />\n {hasGenerateDescriptionFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={regenerateDescription}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:lengthTipDescription', { maxLength, minLength })}\n <a\n href=\"https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions\"\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n >\n {t('plugin-seo:bestPractices')}\n </a>\n </div>\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <TextareaInput\n CustomError={errorMessage}\n onChange={setValue}\n path={pathFromContext}\n required={required}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n </div>\n </div>\n )\n}\n"],"names":["TextareaInput","FieldLabel","useFieldProps","useAllFormFields","useField","useDocumentInfo","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","description","MetaDescription","props","CustomLabel","hasGenerateDescriptionFn","label","labelProps","path","required","pathFromContext","t","locale","fields","docInfo","field","errorMessage","setValue","showError","value","regenerateDescription","genDescriptionResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","generatedDescription","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","CustomError","onChange","alignItems","display","width","text"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAKA,SAASA,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,QAAQ,QAAQ,iBAAgB;AACzC,SAASC,eAAe,QAAQ,2BAA0B;AAE1D,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGH,SAASI,WAAW;AAQrD,OAAO,MAAMC,kBAAkD,CAACC;IAC9D,MAAM,EAAEC,WAAW,EAAEC,wBAAwB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN;IACrF,MAAM,EAAEK,MAAME,eAAe,EAAE,GAAGrB;IAElC,MAAM,EAAEsB,CAAC,EAAE,GAAGjB;IAEd,MAAMkB,SAASnB;IACf,MAAM,CAACoB,OAAO,GAAGvB;IACjB,MAAMwB,UAAUtB;IAEhB,MAAMuB,QAA2BxB,SAAS;QACxCiB;IACF;IAEA,MAAM,EAAEQ,YAAY,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGJ;IAErD,MAAMK,wBAAwBxB,YAAY;QACxC,IAAI,CAACS,0BAA0B;QAE/B,MAAMgB,yBAAyB,MAAMC,MAAM,wCAAwC;YACjFC,MAAMC,KAAKC,SAAS,CAAC;gBACnB,GAAGX,OAAO;gBACVY,KAAK;oBAAE,GAAGb,MAAM;gBAAC;gBACjBD,QAAQ,OAAOA,WAAW,WAAWA,QAAQe,OAAOf;YACtD;YACAgB,aAAa;YACbC,SAAS;gBACP,gBAAgB;YAClB;YACAC,QAAQ;QACV;QAEA,MAAM,EAAEC,QAAQC,oBAAoB,EAAE,GAAG,MAAMX,uBAAuBY,IAAI;QAE1EhB,SAASe,wBAAwB;IACnC,GAAG;QAACnB;QAAQI;QAAUZ;QAA0BO;QAAQE;KAAQ;IAEhE,qBACE,oBAACoB;QACCC,OAAO;YACLC,cAAc;QAChB;qBAEA,oBAACF;QACCC,OAAO;YACLC,cAAc;YACdC,UAAU;QACZ;qBAEA,oBAACH;QAAII,WAAU;qBACb,oBAAClD;QAAWgB,aAAaA;QAAaE,OAAOA;QAAQ,GAAIC,cAAc,CAAC,CAAC;QACxEF,0CACC,oBAACV,MAAM4C,QAAQ,QAAC,uBAEd,oBAACC;QACCC,SAASrB;QACTe,OAAO;YACLO,YAAY;YACZC,iBAAiB;YACjBC,QAAQ;YACRC,OAAO;YACPC,QAAQ;YACRC,SAAS;YACTC,gBAAgB;QAClB;QACAC,MAAK;OAEJtC,EAAE,6CAKX,oBAACuB;QACCC,OAAO;YACLU,OAAO;QACT;OAEClC,EAAE,mCAAmC;QAAEZ;QAAWC;IAAU,kBAC7D,oBAACkD;QACCC,MAAK;QACLC,KAAI;QACJC,QAAO;OAEN1C,EAAE,8CAIT,oBAACuB;QACCC,OAAO;YACLC,cAAc;YACdC,UAAU;QACZ;qBAEA,oBAAClD;QACCmE,aAAatC;QACbuC,UAAUtC;QACVT,MAAME;QACND,UAAUA;QACVS,WAAWA;QACXiB,OAAO;YACLC,cAAc;QAChB;QACAjB,OAAOA;uBAGX,oBAACe;QACCC,OAAO;YACLqB,YAAY;YACZC,SAAS;YACTC,OAAO;QACT;qBAEA,oBAAC5D;QAAgBC,WAAWA;QAAWC,WAAWA;QAAW2D,MAAMxC;;AAI3E,EAAC"}
1
+ {"version":3,"sources":["../../src/fields/MetaDescription.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { FieldType, Options } from '@payloadcms/ui/forms/useField'\n\nimport { TextareaInput } from '@payloadcms/ui/fields/Textarea'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\nimport type { GenerateDescription } from '../types.js'\n\nimport { defaults } from '../defaults.js'\nimport { LengthIndicator } from '../ui/LengthIndicator.js'\n\nconst { maxLength, minLength } = defaults.description\n\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaDescriptionProps = FormFieldBase & {\n hasGenerateDescriptionFn: boolean\n path: string\n}\n\nexport const MetaDescription: React.FC<MetaDescriptionProps> = (props) => {\n const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, path, required } = props\n const { path: pathFromContext } = useFieldProps()\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const field: FieldType<string> = useField({\n path,\n } as Options)\n\n const { errorMessage, setValue, showError, value } = field\n\n const regenerateDescription = useCallback(async () => {\n if (!hasGenerateDescriptionFn) return\n\n const genDescriptionResponse = await fetch('/api/plugin-seo/generate-description', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...fields },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateDescription>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedDescription } = await genDescriptionResponse.json()\n\n setValue(generatedDescription || '')\n }, [fields, setValue, hasGenerateDescriptionFn, locale, docInfo])\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n <FieldLabel CustomLabel={CustomLabel} label={label} {...(labelProps || {})} />\n {hasGenerateDescriptionFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={regenerateDescription}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:lengthTipDescription', { maxLength, minLength })}\n <a\n href=\"https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions\"\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n >\n {t('plugin-seo:bestPractices')}\n </a>\n </div>\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <TextareaInput\n CustomError={errorMessage}\n onChange={setValue}\n path={pathFromContext}\n required={required}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n </div>\n </div>\n )\n}\n"],"names":["TextareaInput","FieldLabel","useFieldProps","useAllFormFields","useField","useDocumentInfo","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","description","MetaDescription","props","CustomLabel","hasGenerateDescriptionFn","label","labelProps","path","required","pathFromContext","t","locale","fields","docInfo","field","errorMessage","setValue","showError","value","regenerateDescription","genDescriptionResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","generatedDescription","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","CustomError","onChange","alignItems","display","width","text"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/dist/fields/MetaImage.js CHANGED
@@ -1,4 +1,5 @@
1
1
  'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { UploadInput } from '@payloadcms/ui/fields/Upload';
3
4
  import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
4
5
  import { useAllFormFields } from '@payloadcms/ui/forms/Form';
@@ -46,75 +47,97 @@ export const MetaImage = (props)=>{
46
47
  const config = useConfig();
47
48
  const { collections, routes: { api } = {}, serverURL } = config;
48
49
  const collection = collections?.find((coll)=>coll.slug === relationTo) || undefined;
49
- return /*#__PURE__*/ React.createElement("div", {
50
+ return /*#__PURE__*/ _jsxs("div", {
50
51
  style: {
51
52
  marginBottom: '20px'
52
- }
53
- }, /*#__PURE__*/ React.createElement("div", {
54
- style: {
55
- marginBottom: '5px',
56
- position: 'relative'
57
- }
58
- }, /*#__PURE__*/ React.createElement("div", {
59
- className: "plugin-seo__field"
60
- }, /*#__PURE__*/ React.createElement(FieldLabel, {
61
- CustomLabel: CustomLabel,
62
- label: label,
63
- ...labelProps || {}
64
- }), hasGenerateImageFn && /*#__PURE__*/ React.createElement(React.Fragment, null, "  —  ", /*#__PURE__*/ React.createElement("button", {
65
- onClick: regenerateImage,
66
- style: {
67
- background: 'none',
68
- backgroundColor: 'transparent',
69
- border: 'none',
70
- color: 'currentcolor',
71
- cursor: 'pointer',
72
- padding: 0,
73
- textDecoration: 'underline'
74
- },
75
- type: "button"
76
- }, t('plugin-seo:autoGenerate')))), hasGenerateImageFn && /*#__PURE__*/ React.createElement("div", {
77
- style: {
78
- color: '#9A9A9A'
79
- }
80
- }, t('plugin-seo:imageAutoGenerationTip'))), /*#__PURE__*/ React.createElement("div", {
81
- style: {
82
- marginBottom: '10px',
83
- position: 'relative'
84
- }
85
- }, /*#__PURE__*/ React.createElement(UploadInput, {
86
- CustomError: errorMessage,
87
- api: api,
88
- collection: collection,
89
- filterOptions: field.filterOptions,
90
- label: undefined,
91
- onChange: (incomingImage)=>{
92
- if (incomingImage !== null) {
93
- const { id: incomingID } = incomingImage;
94
- setValue(incomingID);
95
- } else {
96
- setValue(null);
97
- }
98
- },
99
- relationTo: relationTo,
100
- required: required,
101
- serverURL: serverURL,
102
- showError: showError,
103
- style: {
104
- marginBottom: 0
105
53
  },
106
- value: value
107
- })), /*#__PURE__*/ React.createElement("div", {
108
- style: {
109
- alignItems: 'center',
110
- display: 'flex',
111
- width: '100%'
112
- }
113
- }, /*#__PURE__*/ React.createElement(Pill, {
114
- backgroundColor: hasImage ? 'green' : 'red',
115
- color: "white",
116
- label: hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')
117
- })));
54
+ children: [
55
+ /*#__PURE__*/ _jsxs("div", {
56
+ style: {
57
+ marginBottom: '5px',
58
+ position: 'relative'
59
+ },
60
+ children: [
61
+ /*#__PURE__*/ _jsxs("div", {
62
+ className: "plugin-seo__field",
63
+ children: [
64
+ /*#__PURE__*/ _jsx(FieldLabel, {
65
+ CustomLabel: CustomLabel,
66
+ label: label,
67
+ ...labelProps || {}
68
+ }),
69
+ hasGenerateImageFn && /*#__PURE__*/ _jsxs(React.Fragment, {
70
+ children: [
71
+ "  —  ",
72
+ /*#__PURE__*/ _jsx("button", {
73
+ onClick: regenerateImage,
74
+ style: {
75
+ background: 'none',
76
+ backgroundColor: 'transparent',
77
+ border: 'none',
78
+ color: 'currentcolor',
79
+ cursor: 'pointer',
80
+ padding: 0,
81
+ textDecoration: 'underline'
82
+ },
83
+ type: "button",
84
+ children: t('plugin-seo:autoGenerate')
85
+ })
86
+ ]
87
+ })
88
+ ]
89
+ }),
90
+ hasGenerateImageFn && /*#__PURE__*/ _jsx("div", {
91
+ style: {
92
+ color: '#9A9A9A'
93
+ },
94
+ children: t('plugin-seo:imageAutoGenerationTip')
95
+ })
96
+ ]
97
+ }),
98
+ /*#__PURE__*/ _jsx("div", {
99
+ style: {
100
+ marginBottom: '10px',
101
+ position: 'relative'
102
+ },
103
+ children: /*#__PURE__*/ _jsx(UploadInput, {
104
+ CustomError: errorMessage,
105
+ api: api,
106
+ collection: collection,
107
+ filterOptions: field.filterOptions,
108
+ label: undefined,
109
+ onChange: (incomingImage)=>{
110
+ if (incomingImage !== null) {
111
+ const { id: incomingID } = incomingImage;
112
+ setValue(incomingID);
113
+ } else {
114
+ setValue(null);
115
+ }
116
+ },
117
+ relationTo: relationTo,
118
+ required: required,
119
+ serverURL: serverURL,
120
+ showError: showError,
121
+ style: {
122
+ marginBottom: 0
123
+ },
124
+ value: value
125
+ })
126
+ }),
127
+ /*#__PURE__*/ _jsx("div", {
128
+ style: {
129
+ alignItems: 'center',
130
+ display: 'flex',
131
+ width: '100%'
132
+ },
133
+ children: /*#__PURE__*/ _jsx(Pill, {
134
+ backgroundColor: hasImage ? 'green' : 'red',
135
+ color: "white",
136
+ label: hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')
137
+ })
138
+ })
139
+ ]
140
+ });
118
141
  };
119
142
 
120
143
  //# sourceMappingURL=MetaImage.js.map
package/dist/fields/MetaImage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/fields/MetaImage.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadInputProps } from '@payloadcms/ui/fields/Upload'\nimport type { FieldType, Options } from '@payloadcms/ui/forms/useField'\n\nimport { UploadInput } from '@payloadcms/ui/fields/Upload'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\nimport type { GenerateImage } from '../types.js'\n\nimport { Pill } from '../ui/Pill.js'\n\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaImageProps = UploadInputProps & {\n hasGenerateImageFn: boolean\n}\n\nexport const MetaImage: React.FC<MetaImageProps> = (props) => {\n const { CustomLabel, hasGenerateImageFn, label, labelProps, relationTo, required } = props || {}\n\n const field: FieldType<string> = useField(props as Options)\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const { errorMessage, setValue, showError, value } = field\n\n const regenerateImage = useCallback(async () => {\n if (!hasGenerateImageFn) return\n\n const genImageResponse = await fetch('/api/plugin-seo/generate-image', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...fields },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateImage>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedImage } = await genImageResponse.json()\n\n setValue(generatedImage || '')\n }, [fields, setValue, hasGenerateImageFn, locale, docInfo])\n\n const hasImage = Boolean(value)\n\n const config = useConfig()\n\n const { collections, routes: { api } = {}, serverURL } = config\n\n const collection = collections?.find((coll) => coll.slug === relationTo) || undefined\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n <FieldLabel CustomLabel={CustomLabel} label={label} {...(labelProps || {})} />\n {hasGenerateImageFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={regenerateImage}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n {hasGenerateImageFn && (\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:imageAutoGenerationTip')}\n </div>\n )}\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <UploadInput\n CustomError={errorMessage}\n api={api}\n collection={collection}\n filterOptions={field.filterOptions}\n label={undefined}\n onChange={(incomingImage) => {\n if (incomingImage !== null) {\n const { id: incomingID } = incomingImage\n setValue(incomingID)\n } else {\n setValue(null)\n }\n }}\n relationTo={relationTo}\n required={required}\n serverURL={serverURL}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <Pill\n backgroundColor={hasImage ? 'green' : 'red'}\n color=\"white\"\n label={hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')}\n />\n </div>\n </div>\n )\n}\n"],"names":["UploadInput","FieldLabel","useAllFormFields","useField","useConfig","useDocumentInfo","useLocale","useTranslation","React","useCallback","Pill","MetaImage","props","CustomLabel","hasGenerateImageFn","label","labelProps","relationTo","required","field","t","locale","fields","docInfo","errorMessage","setValue","showError","value","regenerateImage","genImageResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","generatedImage","json","hasImage","Boolean","config","collections","routes","api","serverURL","collection","find","coll","slug","undefined","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","CustomError","filterOptions","onChange","incomingImage","id","incomingID","alignItems","display","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../../src/fields/MetaImage.tsx"],"sourcesContent":["'use client'\n\nimport type { UploadInputProps } from '@payloadcms/ui/fields/Upload'\nimport type { FieldType, Options } from '@payloadcms/ui/forms/useField'\n\nimport { UploadInput } from '@payloadcms/ui/fields/Upload'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useConfig } from '@payloadcms/ui/providers/Config'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\nimport type { GenerateImage } from '../types.js'\n\nimport { Pill } from '../ui/Pill.js'\n\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaImageProps = UploadInputProps & {\n hasGenerateImageFn: boolean\n}\n\nexport const MetaImage: React.FC<MetaImageProps> = (props) => {\n const { CustomLabel, hasGenerateImageFn, label, labelProps, relationTo, required } = props || {}\n\n const field: FieldType<string> = useField(props as Options)\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const { errorMessage, setValue, showError, value } = field\n\n const regenerateImage = useCallback(async () => {\n if (!hasGenerateImageFn) return\n\n const genImageResponse = await fetch('/api/plugin-seo/generate-image', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...fields },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateImage>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedImage } = await genImageResponse.json()\n\n setValue(generatedImage || '')\n }, [fields, setValue, hasGenerateImageFn, locale, docInfo])\n\n const hasImage = Boolean(value)\n\n const config = useConfig()\n\n const { collections, routes: { api } = {}, serverURL } = config\n\n const collection = collections?.find((coll) => coll.slug === relationTo) || undefined\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n <FieldLabel CustomLabel={CustomLabel} label={label} {...(labelProps || {})} />\n {hasGenerateImageFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={regenerateImage}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n {hasGenerateImageFn && (\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:imageAutoGenerationTip')}\n </div>\n )}\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <UploadInput\n CustomError={errorMessage}\n api={api}\n collection={collection}\n filterOptions={field.filterOptions}\n label={undefined}\n onChange={(incomingImage) => {\n if (incomingImage !== null) {\n const { id: incomingID } = incomingImage\n setValue(incomingID)\n } else {\n setValue(null)\n }\n }}\n relationTo={relationTo}\n required={required}\n serverURL={serverURL}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <Pill\n backgroundColor={hasImage ? 'green' : 'red'}\n color=\"white\"\n label={hasImage ? t('plugin-seo:good') : t('plugin-seo:noImage')}\n />\n </div>\n </div>\n )\n}\n"],"names":["UploadInput","FieldLabel","useAllFormFields","useField","useConfig","useDocumentInfo","useLocale","useTranslation","React","useCallback","Pill","MetaImage","props","CustomLabel","hasGenerateImageFn","label","labelProps","relationTo","required","field","t","locale","fields","docInfo","errorMessage","setValue","showError","value","regenerateImage","genImageResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","generatedImage","json","hasImage","Boolean","config","collections","routes","api","serverURL","collection","find","coll","slug","undefined","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","CustomError","filterOptions","onChange","incomingImage","id","incomingID","alignItems","display","width"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/dist/fields/MetaTitle.js CHANGED
@@ -1,4 +1,5 @@
1
1
  'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { TextInput } from '@payloadcms/ui/fields/Text';
3
4
  import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
4
5
  import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
@@ -48,70 +49,97 @@ export const MetaTitle = (props)=>{
48
49
  locale,
49
50
  docInfo
50
51
  ]);
51
- return /*#__PURE__*/ React.createElement("div", {
52
+ return /*#__PURE__*/ _jsxs("div", {
52
53
  style: {
53
54
  marginBottom: '20px'
54
- }
55
- }, /*#__PURE__*/ React.createElement("div", {
56
- style: {
57
- marginBottom: '5px',
58
- position: 'relative'
59
- }
60
- }, /*#__PURE__*/ React.createElement("div", {
61
- className: "plugin-seo__field"
62
- }, /*#__PURE__*/ React.createElement(FieldLabel, {
63
- CustomLabel: CustomLabel,
64
- label: label,
65
- ...labelProps || {}
66
- }), hasGenerateTitleFn && /*#__PURE__*/ React.createElement(React.Fragment, null, "  —  ", /*#__PURE__*/ React.createElement("button", {
67
- onClick: regenerateTitle,
68
- style: {
69
- background: 'none',
70
- backgroundColor: 'transparent',
71
- border: 'none',
72
- color: 'currentcolor',
73
- cursor: 'pointer',
74
- padding: 0,
75
- textDecoration: 'underline'
76
55
  },
77
- type: "button"
78
- }, t('plugin-seo:autoGenerate')))), /*#__PURE__*/ React.createElement("div", {
79
- style: {
80
- color: '#9A9A9A'
81
- }
82
- }, t('plugin-seo:lengthTipTitle', {
83
- maxLength,
84
- minLength
85
- }), /*#__PURE__*/ React.createElement("a", {
86
- href: "https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles",
87
- rel: "noopener noreferrer",
88
- target: "_blank"
89
- }, t('plugin-seo:bestPractices')), ".")), /*#__PURE__*/ React.createElement("div", {
90
- style: {
91
- marginBottom: '10px',
92
- position: 'relative'
93
- }
94
- }, /*#__PURE__*/ React.createElement(TextInput, {
95
- CustomError: errorMessage,
96
- onChange: setValue,
97
- path: pathFromContext,
98
- required: required,
99
- showError: showError,
100
- style: {
101
- marginBottom: 0
102
- },
103
- value: value
104
- })), /*#__PURE__*/ React.createElement("div", {
105
- style: {
106
- alignItems: 'center',
107
- display: 'flex',
108
- width: '100%'
109
- }
110
- }, /*#__PURE__*/ React.createElement(LengthIndicator, {
111
- maxLength: maxLength,
112
- minLength: minLength,
113
- text: value
114
- })));
56
+ children: [
57
+ /*#__PURE__*/ _jsxs("div", {
58
+ style: {
59
+ marginBottom: '5px',
60
+ position: 'relative'
61
+ },
62
+ children: [
63
+ /*#__PURE__*/ _jsxs("div", {
64
+ className: "plugin-seo__field",
65
+ children: [
66
+ /*#__PURE__*/ _jsx(FieldLabel, {
67
+ CustomLabel: CustomLabel,
68
+ label: label,
69
+ ...labelProps || {}
70
+ }),
71
+ hasGenerateTitleFn && /*#__PURE__*/ _jsxs(React.Fragment, {
72
+ children: [
73
+ "  —  ",
74
+ /*#__PURE__*/ _jsx("button", {
75
+ onClick: regenerateTitle,
76
+ style: {
77
+ background: 'none',
78
+ backgroundColor: 'transparent',
79
+ border: 'none',
80
+ color: 'currentcolor',
81
+ cursor: 'pointer',
82
+ padding: 0,
83
+ textDecoration: 'underline'
84
+ },
85
+ type: "button",
86
+ children: t('plugin-seo:autoGenerate')
87
+ })
88
+ ]
89
+ })
90
+ ]
91
+ }),
92
+ /*#__PURE__*/ _jsxs("div", {
93
+ style: {
94
+ color: '#9A9A9A'
95
+ },
96
+ children: [
97
+ t('plugin-seo:lengthTipTitle', {
98
+ maxLength,
99
+ minLength
100
+ }),
101
+ /*#__PURE__*/ _jsx("a", {
102
+ href: "https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles",
103
+ rel: "noopener noreferrer",
104
+ target: "_blank",
105
+ children: t('plugin-seo:bestPractices')
106
+ }),
107
+ "."
108
+ ]
109
+ })
110
+ ]
111
+ }),
112
+ /*#__PURE__*/ _jsx("div", {
113
+ style: {
114
+ marginBottom: '10px',
115
+ position: 'relative'
116
+ },
117
+ children: /*#__PURE__*/ _jsx(TextInput, {
118
+ CustomError: errorMessage,
119
+ onChange: setValue,
120
+ path: pathFromContext,
121
+ required: required,
122
+ showError: showError,
123
+ style: {
124
+ marginBottom: 0
125
+ },
126
+ value: value
127
+ })
128
+ }),
129
+ /*#__PURE__*/ _jsx("div", {
130
+ style: {
131
+ alignItems: 'center',
132
+ display: 'flex',
133
+ width: '100%'
134
+ },
135
+ children: /*#__PURE__*/ _jsx(LengthIndicator, {
136
+ maxLength: maxLength,
137
+ minLength: minLength,
138
+ text: value
139
+ })
140
+ })
141
+ ]
142
+ });
115
143
  };
116
144
 
117
145
  //# sourceMappingURL=MetaTitle.js.map
package/dist/fields/MetaTitle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/fields/MetaTitle.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { Options } from '@payloadcms/ui/forms/useField'\nimport type { FieldType } from '@payloadcms/ui/forms/useField'\n\nimport { TextInput } from '@payloadcms/ui/fields/Text'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\nimport type { GenerateTitle } from '../types.js'\n\nimport { defaults } from '../defaults.js'\nimport { LengthIndicator } from '../ui/LengthIndicator.js'\nimport './index.scss'\n\nconst { maxLength, minLength } = defaults.title\n\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaTitleProps = FormFieldBase & {\n hasGenerateTitleFn: boolean\n}\n\nexport const MetaTitle: React.FC<MetaTitleProps> = (props) => {\n const { CustomLabel, hasGenerateTitleFn, label, labelProps, path, required } = props || {}\n const { path: pathFromContext } = useFieldProps()\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const field: FieldType<string> = useField({\n path,\n } as Options)\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const { errorMessage, setValue, showError, value } = field\n\n const regenerateTitle = useCallback(async () => {\n if (!hasGenerateTitleFn) return\n\n const genTitleResponse = await fetch('/api/plugin-seo/generate-title', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...fields },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateTitle>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedTitle } = await genTitleResponse.json()\n\n setValue(generatedTitle || '')\n }, [fields, setValue, hasGenerateTitleFn, locale, docInfo])\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n <FieldLabel CustomLabel={CustomLabel} label={label} {...(labelProps || {})} />\n {hasGenerateTitleFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={regenerateTitle}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:lengthTipTitle', { maxLength, minLength })}\n <a\n href=\"https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles\"\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n >\n {t('plugin-seo:bestPractices')}\n </a>\n .\n </div>\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <TextInput\n CustomError={errorMessage}\n onChange={setValue}\n path={pathFromContext}\n required={required}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n </div>\n </div>\n )\n}\n"],"names":["TextInput","FieldLabel","useFieldProps","useAllFormFields","useField","useDocumentInfo","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","title","MetaTitle","props","CustomLabel","hasGenerateTitleFn","label","labelProps","path","required","pathFromContext","t","field","locale","fields","docInfo","errorMessage","setValue","showError","value","regenerateTitle","genTitleResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","generatedTitle","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","CustomError","onChange","alignItems","display","width","text"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAMA,SAASA,SAAS,QAAQ,6BAA4B;AACtD,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,WAAW,QAAQ,QAAO;AAK1C,SAASC,QAAQ,QAAQ,iBAAgB;AACzC,SAASC,eAAe,QAAQ,2BAA0B;AAC1D,OAAO,eAAc;AAErB,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGH,SAASI,KAAK;AAO/C,OAAO,MAAMC,YAAsC,CAACC;IAClD,MAAM,EAAEC,WAAW,EAAEC,kBAAkB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,SAAS,CAAC;IACzF,MAAM,EAAEK,MAAME,eAAe,EAAE,GAAGrB;IAElC,MAAM,EAAEsB,CAAC,EAAE,GAAGjB;IAEd,MAAMkB,QAA2BrB,SAAS;QACxCiB;IACF;IAEA,MAAMK,SAASpB;IACf,MAAM,CAACqB,OAAO,GAAGxB;IACjB,MAAMyB,UAAUvB;IAEhB,MAAM,EAAEwB,YAAY,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGP;IAErD,MAAMQ,kBAAkBxB,YAAY;QAClC,IAAI,CAACS,oBAAoB;QAEzB,MAAMgB,mBAAmB,MAAMC,MAAM,kCAAkC;YACrEC,MAAMC,KAAKC,SAAS,CAAC;gBACnB,GAAGV,OAAO;gBACVW,KAAK;oBAAE,GAAGZ,MAAM;gBAAC;gBACjBD,QAAQ,OAAOA,WAAW,WAAWA,QAAQc,OAAOd;YACtD;YACAe,aAAa;YACbC,SAAS;gBACP,gBAAgB;YAClB;YACAC,QAAQ;QACV;QAEA,MAAM,EAAEC,QAAQC,cAAc,EAAE,GAAG,MAAMX,iBAAiBY,IAAI;QAE9DhB,SAASe,kBAAkB;IAC7B,GAAG;QAAClB;QAAQG;QAAUZ;QAAoBQ;QAAQE;KAAQ;IAE1D,qBACE,oBAACmB;QACCC,OAAO;YACLC,cAAc;QAChB;qBAEA,oBAACF;QACCC,OAAO;YACLC,cAAc;YACdC,UAAU;QACZ;qBAEA,oBAACH;QAAII,WAAU;qBACb,oBAAClD;QAAWgB,aAAaA;QAAaE,OAAOA;QAAQ,GAAIC,cAAc,CAAC,CAAC;QACxEF,oCACC,oBAACV,MAAM4C,QAAQ,QAAC,uBAEd,oBAACC;QACCC,SAASrB;QACTe,OAAO;YACLO,YAAY;YACZC,iBAAiB;YACjBC,QAAQ;YACRC,OAAO;YACPC,QAAQ;YACRC,SAAS;YACTC,gBAAgB;QAClB;QACAC,MAAK;OAEJtC,EAAE,6CAKX,oBAACuB;QACCC,OAAO;YACLU,OAAO;QACT;OAEClC,EAAE,6BAA6B;QAAEZ;QAAWC;IAAU,kBACvD,oBAACkD;QACCC,MAAK;QACLC,KAAI;QACJC,QAAO;OAEN1C,EAAE,8BACD,qBAIR,oBAACuB;QACCC,OAAO;YACLC,cAAc;YACdC,UAAU;QACZ;qBAEA,oBAAClD;QACCmE,aAAatC;QACbuC,UAAUtC;QACVT,MAAME;QACND,UAAUA;QACVS,WAAWA;QACXiB,OAAO;YACLC,cAAc;QAChB;QACAjB,OAAOA;uBAGX,oBAACe;QACCC,OAAO;YACLqB,YAAY;YACZC,SAAS;YACTC,OAAO;QACT;qBAEA,oBAAC5D;QAAgBC,WAAWA;QAAWC,WAAWA;QAAW2D,MAAMxC;;AAI3E,EAAC"}
1
+ {"version":3,"sources":["../../src/fields/MetaTitle.tsx"],"sourcesContent":["'use client'\n\nimport type { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { Options } from '@payloadcms/ui/forms/useField'\nimport type { FieldType } from '@payloadcms/ui/forms/useField'\n\nimport { TextInput } from '@payloadcms/ui/fields/Text'\nimport { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'\nimport { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useField } from '@payloadcms/ui/forms/useField'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\nimport type { GenerateTitle } from '../types.js'\n\nimport { defaults } from '../defaults.js'\nimport { LengthIndicator } from '../ui/LengthIndicator.js'\nimport './index.scss'\n\nconst { maxLength, minLength } = defaults.title\n\n// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\ntype MetaTitleProps = FormFieldBase & {\n hasGenerateTitleFn: boolean\n}\n\nexport const MetaTitle: React.FC<MetaTitleProps> = (props) => {\n const { CustomLabel, hasGenerateTitleFn, label, labelProps, path, required } = props || {}\n const { path: pathFromContext } = useFieldProps()\n\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const field: FieldType<string> = useField({\n path,\n } as Options)\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const { errorMessage, setValue, showError, value } = field\n\n const regenerateTitle = useCallback(async () => {\n if (!hasGenerateTitleFn) return\n\n const genTitleResponse = await fetch('/api/plugin-seo/generate-title', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...fields },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateTitle>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: generatedTitle } = await genTitleResponse.json()\n\n setValue(generatedTitle || '')\n }, [fields, setValue, hasGenerateTitleFn, locale, docInfo])\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div\n style={{\n marginBottom: '5px',\n position: 'relative',\n }}\n >\n <div className=\"plugin-seo__field\">\n <FieldLabel CustomLabel={CustomLabel} label={label} {...(labelProps || {})} />\n {hasGenerateTitleFn && (\n <React.Fragment>\n &nbsp; &mdash; &nbsp;\n <button\n onClick={regenerateTitle}\n style={{\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n color: 'currentcolor',\n cursor: 'pointer',\n padding: 0,\n textDecoration: 'underline',\n }}\n type=\"button\"\n >\n {t('plugin-seo:autoGenerate')}\n </button>\n </React.Fragment>\n )}\n </div>\n <div\n style={{\n color: '#9A9A9A',\n }}\n >\n {t('plugin-seo:lengthTipTitle', { maxLength, minLength })}\n <a\n href=\"https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles\"\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n >\n {t('plugin-seo:bestPractices')}\n </a>\n .\n </div>\n </div>\n <div\n style={{\n marginBottom: '10px',\n position: 'relative',\n }}\n >\n <TextInput\n CustomError={errorMessage}\n onChange={setValue}\n path={pathFromContext}\n required={required}\n showError={showError}\n style={{\n marginBottom: 0,\n }}\n value={value}\n />\n </div>\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />\n </div>\n </div>\n )\n}\n"],"names":["TextInput","FieldLabel","useFieldProps","useAllFormFields","useField","useDocumentInfo","useLocale","useTranslation","React","useCallback","defaults","LengthIndicator","maxLength","minLength","title","MetaTitle","props","CustomLabel","hasGenerateTitleFn","label","labelProps","path","required","pathFromContext","t","field","locale","fields","docInfo","errorMessage","setValue","showError","value","regenerateTitle","genTitleResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","generatedTitle","json","div","style","marginBottom","position","className","Fragment","button","onClick","background","backgroundColor","border","color","cursor","padding","textDecoration","type","a","href","rel","target","CustomError","onChange","alignItems","display","width","text"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/dist/ui/LengthIndicator.js CHANGED
@@ -1,4 +1,5 @@
1
1
  'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { useTranslation } from '@payloadcms/ui/providers/Translation';
3
4
  import React, { Fragment, useEffect, useState } from 'react';
4
5
  import { Pill } from './Pill.js';
@@ -65,50 +66,70 @@ export const LengthIndicator = (props)=>{
65
66
  const textLength = text?.length || 0;
66
67
  const charsUntilMax = maxLength - textLength;
67
68
  const charsUntilMin = minLength - textLength;
68
- return /*#__PURE__*/ React.createElement("div", {
69
+ return /*#__PURE__*/ _jsxs("div", {
69
70
  style: {
70
71
  alignItems: 'center',
71
72
  display: 'flex',
72
73
  width: '100%'
73
- }
74
- }, /*#__PURE__*/ React.createElement(Pill, {
75
- backgroundColor: labelStyle.backgroundColor,
76
- color: labelStyle.color,
77
- label: label
78
- }), /*#__PURE__*/ React.createElement("div", {
79
- style: {
80
- flexShrink: 0,
81
- lineHeight: 1,
82
- marginRight: '10px',
83
- whiteSpace: 'nowrap'
84
- }
85
- }, /*#__PURE__*/ React.createElement("small", null, t('plugin-seo:characterCount', {
86
- current: text?.length || 0,
87
- maxLength,
88
- minLength
89
- }), (textLength === 0 || charsUntilMin > 0) && /*#__PURE__*/ React.createElement(Fragment, null, t('plugin-seo:charactersToGo', {
90
- characters: charsUntilMin
91
- })), charsUntilMin <= 0 && charsUntilMax >= 0 && /*#__PURE__*/ React.createElement(Fragment, null, t('plugin-seo:charactersLeftOver', {
92
- characters: charsUntilMax
93
- })), charsUntilMax < 0 && /*#__PURE__*/ React.createElement(Fragment, null, t('plugin-seo:charactersTooMany', {
94
- characters: charsUntilMax * -1
95
- })))), /*#__PURE__*/ React.createElement("div", {
96
- style: {
97
- backgroundColor: '#F3F3F3',
98
- height: '2px',
99
- position: 'relative',
100
- width: '100%'
101
- }
102
- }, /*#__PURE__*/ React.createElement("div", {
103
- style: {
104
- backgroundColor: labelStyle.backgroundColor,
105
- height: '100%',
106
- left: 0,
107
- position: 'absolute',
108
- top: 0,
109
- width: `${barWidth * 100}%`
110
- }
111
- })));
74
+ },
75
+ children: [
76
+ /*#__PURE__*/ _jsx(Pill, {
77
+ backgroundColor: labelStyle.backgroundColor,
78
+ color: labelStyle.color,
79
+ label: label
80
+ }),
81
+ /*#__PURE__*/ _jsx("div", {
82
+ style: {
83
+ flexShrink: 0,
84
+ lineHeight: 1,
85
+ marginRight: '10px',
86
+ whiteSpace: 'nowrap'
87
+ },
88
+ children: /*#__PURE__*/ _jsxs("small", {
89
+ children: [
90
+ t('plugin-seo:characterCount', {
91
+ current: text?.length || 0,
92
+ maxLength,
93
+ minLength
94
+ }),
95
+ (textLength === 0 || charsUntilMin > 0) && /*#__PURE__*/ _jsx(Fragment, {
96
+ children: t('plugin-seo:charactersToGo', {
97
+ characters: charsUntilMin
98
+ })
99
+ }),
100
+ charsUntilMin <= 0 && charsUntilMax >= 0 && /*#__PURE__*/ _jsx(Fragment, {
101
+ children: t('plugin-seo:charactersLeftOver', {
102
+ characters: charsUntilMax
103
+ })
104
+ }),
105
+ charsUntilMax < 0 && /*#__PURE__*/ _jsx(Fragment, {
106
+ children: t('plugin-seo:charactersTooMany', {
107
+ characters: charsUntilMax * -1
108
+ })
109
+ })
110
+ ]
111
+ })
112
+ }),
113
+ /*#__PURE__*/ _jsx("div", {
114
+ style: {
115
+ backgroundColor: '#F3F3F3',
116
+ height: '2px',
117
+ position: 'relative',
118
+ width: '100%'
119
+ },
120
+ children: /*#__PURE__*/ _jsx("div", {
121
+ style: {
122
+ backgroundColor: labelStyle.backgroundColor,
123
+ height: '100%',
124
+ left: 0,
125
+ position: 'absolute',
126
+ top: 0,
127
+ width: `${barWidth * 100}%`
128
+ }
129
+ })
130
+ })
131
+ ]
132
+ });
112
133
  };
113
134
 
114
135
  //# sourceMappingURL=LengthIndicator.js.map
package/dist/ui/LengthIndicator.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ui/LengthIndicator.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { Fragment, useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\n\nimport { Pill } from './Pill.js'\n\nexport const LengthIndicator: React.FC<{\n maxLength?: number\n minLength?: number\n text?: string\n}> = (props) => {\n const { maxLength = 0, minLength = 0, text } = props\n\n const [labelStyle, setLabelStyle] = useState({\n backgroundColor: '',\n color: '',\n })\n\n const [label, setLabel] = useState('')\n const [barWidth, setBarWidth] = useState<number>(0)\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n useEffect(() => {\n const textLength = text?.length || 0\n\n if (textLength === 0) {\n setLabel('Missing')\n setLabelStyle({\n backgroundColor: 'red',\n color: 'white',\n })\n setBarWidth(0)\n } else {\n const progress = (textLength - minLength) / (maxLength - minLength)\n\n if (progress < 0) {\n const ratioUntilMin = textLength / minLength\n\n if (ratioUntilMin > 0.9) {\n setLabel(t('plugin-seo:almostThere'))\n setLabelStyle({\n backgroundColor: 'orange',\n color: 'white',\n })\n } else {\n setLabel(t('plugin-seo:tooShort'))\n setLabelStyle({\n backgroundColor: 'orangered',\n color: 'white',\n })\n }\n\n setBarWidth(ratioUntilMin)\n }\n\n if (progress >= 0 && progress <= 1) {\n setLabel(t('plugin-seo:good'))\n setLabelStyle({\n backgroundColor: 'green',\n color: 'white',\n })\n setBarWidth(progress)\n }\n\n if (progress > 1) {\n setLabel(t('plugin-seo:tooLong'))\n setLabelStyle({\n backgroundColor: 'red',\n color: 'white',\n })\n setBarWidth(1)\n }\n }\n }, [minLength, maxLength, text, t])\n\n const textLength = text?.length || 0\n\n const charsUntilMax = maxLength - textLength\n const charsUntilMin = minLength - textLength\n\n return (\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <Pill backgroundColor={labelStyle.backgroundColor} color={labelStyle.color} label={label} />\n <div\n style={{\n flexShrink: 0,\n lineHeight: 1,\n marginRight: '10px',\n whiteSpace: 'nowrap',\n }}\n >\n <small>\n {t('plugin-seo:characterCount', { current: text?.length || 0, maxLength, minLength })}\n {(textLength === 0 || charsUntilMin > 0) && (\n <Fragment>{t('plugin-seo:charactersToGo', { characters: charsUntilMin })}</Fragment>\n )}\n {charsUntilMin <= 0 && charsUntilMax >= 0 && (\n <Fragment>{t('plugin-seo:charactersLeftOver', { characters: charsUntilMax })}</Fragment>\n )}\n {charsUntilMax < 0 && (\n <Fragment>\n {t('plugin-seo:charactersTooMany', { characters: charsUntilMax * -1 })}\n </Fragment>\n )}\n </small>\n </div>\n <div\n style={{\n backgroundColor: '#F3F3F3',\n height: '2px',\n position: 'relative',\n width: '100%',\n }}\n >\n <div\n style={{\n backgroundColor: labelStyle.backgroundColor,\n height: '100%',\n left: 0,\n position: 'absolute',\n top: 0,\n width: `${barWidth * 100}%`,\n }}\n />\n </div>\n </div>\n )\n}\n"],"names":["useTranslation","React","Fragment","useEffect","useState","Pill","LengthIndicator","props","maxLength","minLength","text","labelStyle","setLabelStyle","backgroundColor","color","label","setLabel","barWidth","setBarWidth","t","textLength","length","progress","ratioUntilMin","charsUntilMax","charsUntilMin","div","style","alignItems","display","width","flexShrink","lineHeight","marginRight","whiteSpace","small","current","characters","height","position","left","top"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI5D,SAASC,IAAI,QAAQ,YAAW;AAEhC,OAAO,MAAMC,kBAIR,CAACC;IACJ,MAAM,EAAEC,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,IAAI,EAAE,GAAGH;IAE/C,MAAM,CAACI,YAAYC,cAAc,GAAGR,SAAS;QAC3CS,iBAAiB;QACjBC,OAAO;IACT;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGZ,SAAS;IACnC,MAAM,CAACa,UAAUC,YAAY,GAAGd,SAAiB;IACjD,MAAM,EAAEe,CAAC,EAAE,GAAGnB;IAEdG,UAAU;QACR,MAAMiB,aAAaV,MAAMW,UAAU;QAEnC,IAAID,eAAe,GAAG;YACpBJ,SAAS;YACTJ,cAAc;gBACZC,iBAAiB;gBACjBC,OAAO;YACT;YACAI,YAAY;QACd,OAAO;YACL,MAAMI,WAAW,AAACF,CAAAA,aAAaX,SAAQ,IAAMD,CAAAA,YAAYC,SAAQ;YAEjE,IAAIa,WAAW,GAAG;gBAChB,MAAMC,gBAAgBH,aAAaX;gBAEnC,IAAIc,gBAAgB,KAAK;oBACvBP,SAASG,EAAE;oBACXP,cAAc;wBACZC,iBAAiB;wBACjBC,OAAO;oBACT;gBACF,OAAO;oBACLE,SAASG,EAAE;oBACXP,cAAc;wBACZC,iBAAiB;wBACjBC,OAAO;oBACT;gBACF;gBAEAI,YAAYK;YACd;YAEA,IAAID,YAAY,KAAKA,YAAY,GAAG;gBAClCN,SAASG,EAAE;gBACXP,cAAc;oBACZC,iBAAiB;oBACjBC,OAAO;gBACT;gBACAI,YAAYI;YACd;YAEA,IAAIA,WAAW,GAAG;gBAChBN,SAASG,EAAE;gBACXP,cAAc;oBACZC,iBAAiB;oBACjBC,OAAO;gBACT;gBACAI,YAAY;YACd;QACF;IACF,GAAG;QAACT;QAAWD;QAAWE;QAAMS;KAAE;IAElC,MAAMC,aAAaV,MAAMW,UAAU;IAEnC,MAAMG,gBAAgBhB,YAAYY;IAClC,MAAMK,gBAAgBhB,YAAYW;IAElC,qBACE,oBAACM;QACCC,OAAO;YACLC,YAAY;YACZC,SAAS;YACTC,OAAO;QACT;qBAEA,oBAACzB;QAAKQ,iBAAiBF,WAAWE,eAAe;QAAEC,OAAOH,WAAWG,KAAK;QAAEC,OAAOA;sBACnF,oBAACW;QACCC,OAAO;YACLI,YAAY;YACZC,YAAY;YACZC,aAAa;YACbC,YAAY;QACd;qBAEA,oBAACC,eACEhB,EAAE,6BAA6B;QAAEiB,SAAS1B,MAAMW,UAAU;QAAGb;QAAWC;IAAU,IAClF,AAACW,CAAAA,eAAe,KAAKK,gBAAgB,CAAA,mBACpC,oBAACvB,gBAAUiB,EAAE,6BAA6B;QAAEkB,YAAYZ;IAAc,KAEvEA,iBAAiB,KAAKD,iBAAiB,mBACtC,oBAACtB,gBAAUiB,EAAE,iCAAiC;QAAEkB,YAAYb;IAAc,KAE3EA,gBAAgB,mBACf,oBAACtB,gBACEiB,EAAE,gCAAgC;QAAEkB,YAAYb,gBAAgB,CAAC;IAAE,qBAK5E,oBAACE;QACCC,OAAO;YACLd,iBAAiB;YACjByB,QAAQ;YACRC,UAAU;YACVT,OAAO;QACT;qBAEA,oBAACJ;QACCC,OAAO;YACLd,iBAAiBF,WAAWE,eAAe;YAC3CyB,QAAQ;YACRE,MAAM;YACND,UAAU;YACVE,KAAK;YACLX,OAAO,CAAC,EAAEb,WAAW,IAAI,CAAC,CAAC;QAC7B;;AAKV,EAAC"}
1
+ {"version":3,"sources":["../../src/ui/LengthIndicator.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { Fragment, useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\n\nimport { Pill } from './Pill.js'\n\nexport const LengthIndicator: React.FC<{\n maxLength?: number\n minLength?: number\n text?: string\n}> = (props) => {\n const { maxLength = 0, minLength = 0, text } = props\n\n const [labelStyle, setLabelStyle] = useState({\n backgroundColor: '',\n color: '',\n })\n\n const [label, setLabel] = useState('')\n const [barWidth, setBarWidth] = useState<number>(0)\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n useEffect(() => {\n const textLength = text?.length || 0\n\n if (textLength === 0) {\n setLabel('Missing')\n setLabelStyle({\n backgroundColor: 'red',\n color: 'white',\n })\n setBarWidth(0)\n } else {\n const progress = (textLength - minLength) / (maxLength - minLength)\n\n if (progress < 0) {\n const ratioUntilMin = textLength / minLength\n\n if (ratioUntilMin > 0.9) {\n setLabel(t('plugin-seo:almostThere'))\n setLabelStyle({\n backgroundColor: 'orange',\n color: 'white',\n })\n } else {\n setLabel(t('plugin-seo:tooShort'))\n setLabelStyle({\n backgroundColor: 'orangered',\n color: 'white',\n })\n }\n\n setBarWidth(ratioUntilMin)\n }\n\n if (progress >= 0 && progress <= 1) {\n setLabel(t('plugin-seo:good'))\n setLabelStyle({\n backgroundColor: 'green',\n color: 'white',\n })\n setBarWidth(progress)\n }\n\n if (progress > 1) {\n setLabel(t('plugin-seo:tooLong'))\n setLabelStyle({\n backgroundColor: 'red',\n color: 'white',\n })\n setBarWidth(1)\n }\n }\n }, [minLength, maxLength, text, t])\n\n const textLength = text?.length || 0\n\n const charsUntilMax = maxLength - textLength\n const charsUntilMin = minLength - textLength\n\n return (\n <div\n style={{\n alignItems: 'center',\n display: 'flex',\n width: '100%',\n }}\n >\n <Pill backgroundColor={labelStyle.backgroundColor} color={labelStyle.color} label={label} />\n <div\n style={{\n flexShrink: 0,\n lineHeight: 1,\n marginRight: '10px',\n whiteSpace: 'nowrap',\n }}\n >\n <small>\n {t('plugin-seo:characterCount', { current: text?.length || 0, maxLength, minLength })}\n {(textLength === 0 || charsUntilMin > 0) && (\n <Fragment>{t('plugin-seo:charactersToGo', { characters: charsUntilMin })}</Fragment>\n )}\n {charsUntilMin <= 0 && charsUntilMax >= 0 && (\n <Fragment>{t('plugin-seo:charactersLeftOver', { characters: charsUntilMax })}</Fragment>\n )}\n {charsUntilMax < 0 && (\n <Fragment>\n {t('plugin-seo:charactersTooMany', { characters: charsUntilMax * -1 })}\n </Fragment>\n )}\n </small>\n </div>\n <div\n style={{\n backgroundColor: '#F3F3F3',\n height: '2px',\n position: 'relative',\n width: '100%',\n }}\n >\n <div\n style={{\n backgroundColor: labelStyle.backgroundColor,\n height: '100%',\n left: 0,\n position: 'absolute',\n top: 0,\n width: `${barWidth * 100}%`,\n }}\n />\n </div>\n </div>\n )\n}\n"],"names":["useTranslation","React","Fragment","useEffect","useState","Pill","LengthIndicator","props","maxLength","minLength","text","labelStyle","setLabelStyle","backgroundColor","color","label","setLabel","barWidth","setBarWidth","t","textLength","length","progress","ratioUntilMin","charsUntilMax","charsUntilMin","div","style","alignItems","display","width","flexShrink","lineHeight","marginRight","whiteSpace","small","current","characters","height","position","left","top"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAASA,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI5D,SAASC,IAAI,QAAQ,YAAW;AAEhC,OAAO,MAAMC,kBAIR,CAACC;IACJ,MAAM,EAAEC,YAAY,CAAC,EAAEC,YAAY,CAAC,EAAEC,IAAI,EAAE,GAAGH;IAE/C,MAAM,CAACI,YAAYC,cAAc,GAAGR,SAAS;QAC3CS,iBAAiB;QACjBC,OAAO;IACT;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGZ,SAAS;IACnC,MAAM,CAACa,UAAUC,YAAY,GAAGd,SAAiB;IACjD,MAAM,EAAEe,CAAC,EAAE,GAAGnB;IAEdG,UAAU;QACR,MAAMiB,aAAaV,MAAMW,UAAU;QAEnC,IAAID,eAAe,GAAG;YACpBJ,SAAS;YACTJ,cAAc;gBACZC,iBAAiB;gBACjBC,OAAO;YACT;YACAI,YAAY;QACd,OAAO;YACL,MAAMI,WAAW,AAACF,CAAAA,aAAaX,SAAQ,IAAMD,CAAAA,YAAYC,SAAQ;YAEjE,IAAIa,WAAW,GAAG;gBAChB,MAAMC,gBAAgBH,aAAaX;gBAEnC,IAAIc,gBAAgB,KAAK;oBACvBP,SAASG,EAAE;oBACXP,cAAc;wBACZC,iBAAiB;wBACjBC,OAAO;oBACT;gBACF,OAAO;oBACLE,SAASG,EAAE;oBACXP,cAAc;wBACZC,iBAAiB;wBACjBC,OAAO;oBACT;gBACF;gBAEAI,YAAYK;YACd;YAEA,IAAID,YAAY,KAAKA,YAAY,GAAG;gBAClCN,SAASG,EAAE;gBACXP,cAAc;oBACZC,iBAAiB;oBACjBC,OAAO;gBACT;gBACAI,YAAYI;YACd;YAEA,IAAIA,WAAW,GAAG;gBAChBN,SAASG,EAAE;gBACXP,cAAc;oBACZC,iBAAiB;oBACjBC,OAAO;gBACT;gBACAI,YAAY;YACd;QACF;IACF,GAAG;QAACT;QAAWD;QAAWE;QAAMS;KAAE;IAElC,MAAMC,aAAaV,MAAMW,UAAU;IAEnC,MAAMG,gBAAgBhB,YAAYY;IAClC,MAAMK,gBAAgBhB,YAAYW;IAElC,qBACE,MAACM;QACCC,OAAO;YACLC,YAAY;YACZC,SAAS;YACTC,OAAO;QACT;;0BAEA,KAACzB;gBAAKQ,iBAAiBF,WAAWE,eAAe;gBAAEC,OAAOH,WAAWG,KAAK;gBAAEC,OAAOA;;0BACnF,KAACW;gBACCC,OAAO;oBACLI,YAAY;oBACZC,YAAY;oBACZC,aAAa;oBACbC,YAAY;gBACd;0BAEA,cAAA,MAACC;;wBACEhB,EAAE,6BAA6B;4BAAEiB,SAAS1B,MAAMW,UAAU;4BAAGb;4BAAWC;wBAAU;wBACjFW,CAAAA,eAAe,KAAKK,gBAAgB,CAAA,mBACpC,KAACvB;sCAAUiB,EAAE,6BAA6B;gCAAEkB,YAAYZ;4BAAc;;wBAEvEA,iBAAiB,KAAKD,iBAAiB,mBACtC,KAACtB;sCAAUiB,EAAE,iCAAiC;gCAAEkB,YAAYb;4BAAc;;wBAE3EA,gBAAgB,mBACf,KAACtB;sCACEiB,EAAE,gCAAgC;gCAAEkB,YAAYb,gBAAgB,CAAC;4BAAE;;;;;0BAK5E,KAACE;gBACCC,OAAO;oBACLd,iBAAiB;oBACjByB,QAAQ;oBACRC,UAAU;oBACVT,OAAO;gBACT;0BAEA,cAAA,KAACJ;oBACCC,OAAO;wBACLd,iBAAiBF,WAAWE,eAAe;wBAC3CyB,QAAQ;wBACRE,MAAM;wBACND,UAAU;wBACVE,KAAK;wBACLX,OAAO,CAAC,EAAEb,WAAW,IAAI,CAAC,CAAC;oBAC7B;;;;;AAKV,EAAC"}
package/dist/ui/Overview.js CHANGED
@@ -1,4 +1,5 @@
1
1
  'use client';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import { useAllFormFields, useForm } from '@payloadcms/ui/forms/Form';
3
4
  import { useTranslation } from '@payloadcms/ui/providers/Translation';
4
5
  import React, { useCallback, useEffect, useState } from 'react';
@@ -38,14 +39,17 @@ export const Overview = ()=>{
38
39
  imageIsValid
39
40
  ];
40
41
  const numberOfPasses = testResults.filter(Boolean).length;
41
- return /*#__PURE__*/ React.createElement("div", {
42
+ return /*#__PURE__*/ _jsx("div", {
42
43
  style: {
43
44
  marginBottom: '20px'
44
- }
45
- }, /*#__PURE__*/ React.createElement("div", null, t('plugin-seo:checksPassing', {
46
- current: numberOfPasses,
47
- max: testResults.length
48
- })));
45
+ },
46
+ children: /*#__PURE__*/ _jsx("div", {
47
+ children: t('plugin-seo:checksPassing', {
48
+ current: numberOfPasses,
49
+ max: testResults.length
50
+ })
51
+ })
52
+ });
49
53
  };
50
54
 
51
55
  //# sourceMappingURL=Overview.js.map
package/dist/ui/Overview.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ui/Overview.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField } from 'payload/types'\n\nimport { useAllFormFields, useForm } from '@payloadcms/ui/forms/Form'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\n\nimport { defaults } from '../defaults.js'\n\nconst {\n description: { maxLength: maxDesc, minLength: minDesc },\n title: { maxLength: maxTitle, minLength: minTitle },\n} = defaults\n\nexport const Overview: React.FC = () => {\n const {\n // dispatchFields,\n getFields,\n } = useForm()\n\n const [\n {\n 'meta.description': { value: metaDesc } = {} as FormField,\n 'meta.image': { value: metaImage } = {} as FormField,\n 'meta.title': { value: metaTitle } = {} as FormField,\n },\n ] = useAllFormFields()\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const [titleIsValid, setTitleIsValid] = useState<boolean | undefined>()\n const [descIsValid, setDescIsValid] = useState<boolean | undefined>()\n const [imageIsValid, setImageIsValid] = useState<boolean | undefined>()\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const resetAll = useCallback(() => {\n const fields = getFields()\n const fieldsWithoutMeta = fields\n fieldsWithoutMeta['meta.title'].value = ''\n fieldsWithoutMeta['meta.description'].value = ''\n fieldsWithoutMeta['meta.image'].value = ''\n // dispatchFields(fieldsWithoutMeta);\n }, [getFields])\n\n useEffect(() => {\n if (typeof metaTitle === 'string')\n setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle)\n if (typeof metaDesc === 'string')\n setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)\n setImageIsValid(Boolean(metaImage))\n }, [metaTitle, metaDesc, metaImage])\n\n const testResults = [titleIsValid, descIsValid, imageIsValid]\n\n const numberOfPasses = testResults.filter(Boolean).length\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div>\n {t('plugin-seo:checksPassing', { current: numberOfPasses, max: testResults.length })}\n </div>\n </div>\n )\n}\n"],"names":["useAllFormFields","useForm","useTranslation","React","useCallback","useEffect","useState","defaults","description","maxLength","maxDesc","minLength","minDesc","title","maxTitle","minTitle","Overview","getFields","value","metaDesc","metaImage","metaTitle","t","titleIsValid","setTitleIsValid","descIsValid","setDescIsValid","imageIsValid","setImageIsValid","resetAll","fields","fieldsWithoutMeta","length","Boolean","testResults","numberOfPasses","filter","div","style","marginBottom","current","max"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,gBAAgB,EAAEC,OAAO,QAAQ,4BAA2B;AACrE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,QAAQ,QAAQ,iBAAgB;AAEzC,MAAM,EACJC,aAAa,EAAEC,WAAWC,OAAO,EAAEC,WAAWC,OAAO,EAAE,EACvDC,OAAO,EAAEJ,WAAWK,QAAQ,EAAEH,WAAWI,QAAQ,EAAE,EACpD,GAAGR;AAEJ,OAAO,MAAMS,WAAqB;IAChC,MAAM,EACJ,mBAAmB;IACnBC,SAAS,EACV,GAAGhB;IAEJ,MAAM,CACJ,EACE,oBAAoB,EAAEiB,OAAOC,QAAQ,EAAE,GAAG,CAAC,CAAc,EACzD,cAAc,EAAED,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,cAAc,EAAEF,OAAOG,SAAS,EAAE,GAAG,CAAC,CAAc,EACrD,CACF,GAAGrB;IACJ,MAAM,EAAEsB,CAAC,EAAE,GAAGpB;IAEd,MAAM,CAACqB,cAAcC,gBAAgB,GAAGlB;IACxC,MAAM,CAACmB,aAAaC,eAAe,GAAGpB;IACtC,MAAM,CAACqB,cAAcC,gBAAgB,GAAGtB;IAExC,6DAA6D;IAC7D,MAAMuB,WAAWzB,YAAY;QAC3B,MAAM0B,SAASb;QACf,MAAMc,oBAAoBD;QAC1BC,iBAAiB,CAAC,aAAa,CAACb,KAAK,GAAG;QACxCa,iBAAiB,CAAC,mBAAmB,CAACb,KAAK,GAAG;QAC9Ca,iBAAiB,CAAC,aAAa,CAACb,KAAK,GAAG;IACxC,qCAAqC;IACvC,GAAG;QAACD;KAAU;IAEdZ,UAAU;QACR,IAAI,OAAOgB,cAAc,UACvBG,gBAAgBH,UAAUW,MAAM,IAAIjB,YAAYM,UAAUW,MAAM,IAAIlB;QACtE,IAAI,OAAOK,aAAa,UACtBO,eAAeP,SAASa,MAAM,IAAIpB,WAAWO,SAASa,MAAM,IAAItB;QAClEkB,gBAAgBK,QAAQb;IAC1B,GAAG;QAACC;QAAWF;QAAUC;KAAU;IAEnC,MAAMc,cAAc;QAACX;QAAcE;QAAaE;KAAa;IAE7D,MAAMQ,iBAAiBD,YAAYE,MAAM,CAACH,SAASD,MAAM;IAEzD,qBACE,oBAACK;QACCC,OAAO;YACLC,cAAc;QAChB;qBAEA,oBAACF,aACEf,EAAE,4BAA4B;QAAEkB,SAASL;QAAgBM,KAAKP,YAAYF,MAAM;IAAC;AAI1F,EAAC"}
1
+ {"version":3,"sources":["../../src/ui/Overview.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField } from 'payload/types'\n\nimport { useAllFormFields, useForm } from '@payloadcms/ui/forms/Form'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\n\nimport { defaults } from '../defaults.js'\n\nconst {\n description: { maxLength: maxDesc, minLength: minDesc },\n title: { maxLength: maxTitle, minLength: minTitle },\n} = defaults\n\nexport const Overview: React.FC = () => {\n const {\n // dispatchFields,\n getFields,\n } = useForm()\n\n const [\n {\n 'meta.description': { value: metaDesc } = {} as FormField,\n 'meta.image': { value: metaImage } = {} as FormField,\n 'meta.title': { value: metaTitle } = {} as FormField,\n },\n ] = useAllFormFields()\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const [titleIsValid, setTitleIsValid] = useState<boolean | undefined>()\n const [descIsValid, setDescIsValid] = useState<boolean | undefined>()\n const [imageIsValid, setImageIsValid] = useState<boolean | undefined>()\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const resetAll = useCallback(() => {\n const fields = getFields()\n const fieldsWithoutMeta = fields\n fieldsWithoutMeta['meta.title'].value = ''\n fieldsWithoutMeta['meta.description'].value = ''\n fieldsWithoutMeta['meta.image'].value = ''\n // dispatchFields(fieldsWithoutMeta);\n }, [getFields])\n\n useEffect(() => {\n if (typeof metaTitle === 'string')\n setTitleIsValid(metaTitle.length >= minTitle && metaTitle.length <= maxTitle)\n if (typeof metaDesc === 'string')\n setDescIsValid(metaDesc.length >= minDesc && metaDesc.length <= maxDesc)\n setImageIsValid(Boolean(metaImage))\n }, [metaTitle, metaDesc, metaImage])\n\n const testResults = [titleIsValid, descIsValid, imageIsValid]\n\n const numberOfPasses = testResults.filter(Boolean).length\n\n return (\n <div\n style={{\n marginBottom: '20px',\n }}\n >\n <div>\n {t('plugin-seo:checksPassing', { current: numberOfPasses, max: testResults.length })}\n </div>\n </div>\n )\n}\n"],"names":["useAllFormFields","useForm","useTranslation","React","useCallback","useEffect","useState","defaults","description","maxLength","maxDesc","minLength","minDesc","title","maxTitle","minTitle","Overview","getFields","value","metaDesc","metaImage","metaTitle","t","titleIsValid","setTitleIsValid","descIsValid","setDescIsValid","imageIsValid","setImageIsValid","resetAll","fields","fieldsWithoutMeta","length","Boolean","testResults","numberOfPasses","filter","div","style","marginBottom","current","max"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,OAAO,QAAQ,4BAA2B;AACrE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAI/D,SAASC,QAAQ,QAAQ,iBAAgB;AAEzC,MAAM,EACJC,aAAa,EAAEC,WAAWC,OAAO,EAAEC,WAAWC,OAAO,EAAE,EACvDC,OAAO,EAAEJ,WAAWK,QAAQ,EAAEH,WAAWI,QAAQ,EAAE,EACpD,GAAGR;AAEJ,OAAO,MAAMS,WAAqB;IAChC,MAAM,EACJ,mBAAmB;IACnBC,SAAS,EACV,GAAGhB;IAEJ,MAAM,CACJ,EACE,oBAAoB,EAAEiB,OAAOC,QAAQ,EAAE,GAAG,CAAC,CAAc,EACzD,cAAc,EAAED,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACpD,cAAc,EAAEF,OAAOG,SAAS,EAAE,GAAG,CAAC,CAAc,EACrD,CACF,GAAGrB;IACJ,MAAM,EAAEsB,CAAC,EAAE,GAAGpB;IAEd,MAAM,CAACqB,cAAcC,gBAAgB,GAAGlB;IACxC,MAAM,CAACmB,aAAaC,eAAe,GAAGpB;IACtC,MAAM,CAACqB,cAAcC,gBAAgB,GAAGtB;IAExC,6DAA6D;IAC7D,MAAMuB,WAAWzB,YAAY;QAC3B,MAAM0B,SAASb;QACf,MAAMc,oBAAoBD;QAC1BC,iBAAiB,CAAC,aAAa,CAACb,KAAK,GAAG;QACxCa,iBAAiB,CAAC,mBAAmB,CAACb,KAAK,GAAG;QAC9Ca,iBAAiB,CAAC,aAAa,CAACb,KAAK,GAAG;IACxC,qCAAqC;IACvC,GAAG;QAACD;KAAU;IAEdZ,UAAU;QACR,IAAI,OAAOgB,cAAc,UACvBG,gBAAgBH,UAAUW,MAAM,IAAIjB,YAAYM,UAAUW,MAAM,IAAIlB;QACtE,IAAI,OAAOK,aAAa,UACtBO,eAAeP,SAASa,MAAM,IAAIpB,WAAWO,SAASa,MAAM,IAAItB;QAClEkB,gBAAgBK,QAAQb;IAC1B,GAAG;QAACC;QAAWF;QAAUC;KAAU;IAEnC,MAAMc,cAAc;QAACX;QAAcE;QAAaE;KAAa;IAE7D,MAAMQ,iBAAiBD,YAAYE,MAAM,CAACH,SAASD,MAAM;IAEzD,qBACE,KAACK;QACCC,OAAO;YACLC,cAAc;QAChB;kBAEA,cAAA,KAACF;sBACEf,EAAE,4BAA4B;gBAAEkB,SAASL;gBAAgBM,KAAKP,YAAYF,MAAM;YAAC;;;AAI1F,EAAC"}
package/dist/ui/Pill.js CHANGED
@@ -1,8 +1,9 @@
1
1
  'use client';
2
+ import { jsx as _jsx } from "react/jsx-runtime";
2
3
  import React from 'react';
3
4
  export const Pill = (props)=>{
4
5
  const { backgroundColor, color, label } = props;
5
- return /*#__PURE__*/ React.createElement("div", {
6
+ return /*#__PURE__*/ _jsx("div", {
6
7
  style: {
7
8
  backgroundColor,
8
9
  borderRadius: '2px',
@@ -12,8 +13,11 @@ export const Pill = (props)=>{
12
13
  marginRight: '10px',
13
14
  padding: '4px 6px',
14
15
  whiteSpace: 'nowrap'
15
- }
16
- }, /*#__PURE__*/ React.createElement("small", null, label));
16
+ },
17
+ children: /*#__PURE__*/ _jsx("small", {
18
+ children: label
19
+ })
20
+ });
17
21
  };
18
22
 
19
23
  //# sourceMappingURL=Pill.js.map
package/dist/ui/Pill.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ui/Pill.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nexport const Pill: React.FC<{\n backgroundColor: string\n color: string\n label: string\n}> = (props) => {\n const { backgroundColor, color, label } = props\n\n return (\n <div\n style={{\n backgroundColor,\n borderRadius: '2px',\n color,\n flexShrink: 0,\n lineHeight: 1,\n marginRight: '10px',\n padding: '4px 6px',\n whiteSpace: 'nowrap',\n }}\n >\n <small>{label}</small>\n </div>\n )\n}\n"],"names":["React","Pill","props","backgroundColor","color","label","div","style","borderRadius","flexShrink","lineHeight","marginRight","padding","whiteSpace","small"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA;AAEA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,OAIR,CAACC;IACJ,MAAM,EAAEC,eAAe,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGH;IAE1C,qBACE,oBAACI;QACCC,OAAO;YACLJ;YACAK,cAAc;YACdJ;YACAK,YAAY;YACZC,YAAY;YACZC,aAAa;YACbC,SAAS;YACTC,YAAY;QACd;qBAEA,oBAACC,eAAOT;AAGd,EAAC"}
1
+ {"version":3,"sources":["../../src/ui/Pill.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nexport const Pill: React.FC<{\n backgroundColor: string\n color: string\n label: string\n}> = (props) => {\n const { backgroundColor, color, label } = props\n\n return (\n <div\n style={{\n backgroundColor,\n borderRadius: '2px',\n color,\n flexShrink: 0,\n lineHeight: 1,\n marginRight: '10px',\n padding: '4px 6px',\n whiteSpace: 'nowrap',\n }}\n >\n <small>{label}</small>\n </div>\n )\n}\n"],"names":["React","Pill","props","backgroundColor","color","label","div","style","borderRadius","flexShrink","lineHeight","marginRight","padding","whiteSpace","small"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAEzB,OAAO,MAAMC,OAIR,CAACC;IACJ,MAAM,EAAEC,eAAe,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGH;IAE1C,qBACE,KAACI;QACCC,OAAO;YACLJ;YACAK,cAAc;YACdJ;YACAK,YAAY;YACZC,YAAY;YACZC,aAAa;YACbC,SAAS;YACTC,YAAY;QACd;kBAEA,cAAA,KAACC;sBAAOT;;;AAGd,EAAC"}
package/dist/ui/Preview.js CHANGED
@@ -1,4 +1,5 @@
1
1
  'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { useAllFormFields } from '@payloadcms/ui/forms/Form';
3
4
  import { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo';
4
5
  import { useLocale } from '@payloadcms/ui/providers/Locale';
@@ -40,40 +41,60 @@ export const Preview = ({ hasGenerateURLFn })=>{
40
41
  docInfo,
41
42
  hasGenerateURLFn
42
43
  ]);
43
- return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", null, t('plugin-seo:preview')), /*#__PURE__*/ React.createElement("div", {
44
- style: {
45
- color: '#9A9A9A',
46
- marginBottom: '5px'
47
- }
48
- }, t('plugin-seo:previewDescription')), /*#__PURE__*/ React.createElement("div", {
49
- style: {
50
- background: 'var(--theme-elevation-50)',
51
- borderRadius: '5px',
52
- boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
53
- maxWidth: '600px',
54
- padding: '20px',
55
- pointerEvents: 'none',
56
- width: '100%'
57
- }
58
- }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("a", {
59
- href: href,
60
- style: {
61
- textDecoration: 'none'
62
- }
63
- }, href || 'https://...')), /*#__PURE__*/ React.createElement("h4", {
64
- style: {
65
- margin: 0
66
- }
67
- }, /*#__PURE__*/ React.createElement("a", {
68
- href: "/",
69
- style: {
70
- textDecoration: 'none'
71
- }
72
- }, metaTitle)), /*#__PURE__*/ React.createElement("p", {
73
- style: {
74
- margin: 0
75
- }
76
- }, metaDescription)));
44
+ return /*#__PURE__*/ _jsxs("div", {
45
+ children: [
46
+ /*#__PURE__*/ _jsx("div", {
47
+ children: t('plugin-seo:preview')
48
+ }),
49
+ /*#__PURE__*/ _jsx("div", {
50
+ style: {
51
+ color: '#9A9A9A',
52
+ marginBottom: '5px'
53
+ },
54
+ children: t('plugin-seo:previewDescription')
55
+ }),
56
+ /*#__PURE__*/ _jsxs("div", {
57
+ style: {
58
+ background: 'var(--theme-elevation-50)',
59
+ borderRadius: '5px',
60
+ boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
61
+ maxWidth: '600px',
62
+ padding: '20px',
63
+ pointerEvents: 'none',
64
+ width: '100%'
65
+ },
66
+ children: [
67
+ /*#__PURE__*/ _jsx("div", {
68
+ children: /*#__PURE__*/ _jsx("a", {
69
+ href: href,
70
+ style: {
71
+ textDecoration: 'none'
72
+ },
73
+ children: href || 'https://...'
74
+ })
75
+ }),
76
+ /*#__PURE__*/ _jsx("h4", {
77
+ style: {
78
+ margin: 0
79
+ },
80
+ children: /*#__PURE__*/ _jsx("a", {
81
+ href: "/",
82
+ style: {
83
+ textDecoration: 'none'
84
+ },
85
+ children: metaTitle
86
+ })
87
+ }),
88
+ /*#__PURE__*/ _jsx("p", {
89
+ style: {
90
+ margin: 0
91
+ },
92
+ children: metaDescription
93
+ })
94
+ ]
95
+ })
96
+ ]
97
+ });
77
98
  };
78
99
 
79
100
  //# sourceMappingURL=Preview.js.map
package/dist/ui/Preview.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ui/Preview.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload/types'\n\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\nimport type { GenerateURL } from '../types.js'\n\ntype PreviewProps = UIField & {\n hasGenerateURLFn: boolean\n}\n\nexport const Preview: React.FC<PreviewProps> = ({ hasGenerateURLFn }) => {\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const {\n 'meta.description': { value: metaDescription } = {} as FormField,\n 'meta.title': { value: metaTitle } = {} as FormField,\n } = fields\n\n const [href, setHref] = useState<string>()\n\n useEffect(() => {\n const getHref = async () => {\n const genURLResponse = await fetch('/api/plugin-seo/generate-url', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...fields },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateURL>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: newHref } = await genURLResponse.json()\n\n setHref(newHref)\n }\n\n if (hasGenerateURLFn && !href) {\n void getHref()\n }\n }, [fields, href, locale, docInfo, hasGenerateURLFn])\n\n return (\n <div>\n <div>{t('plugin-seo:preview')}</div>\n <div\n style={{\n color: '#9A9A9A',\n marginBottom: '5px',\n }}\n >\n {t('plugin-seo:previewDescription')}\n </div>\n <div\n style={{\n background: 'var(--theme-elevation-50)',\n borderRadius: '5px',\n boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',\n maxWidth: '600px',\n padding: '20px',\n pointerEvents: 'none',\n width: '100%',\n }}\n >\n <div>\n <a\n href={href}\n style={{\n textDecoration: 'none',\n }}\n >\n {href || 'https://...'}\n </a>\n </div>\n <h4\n style={{\n margin: 0,\n }}\n >\n <a\n href=\"/\"\n style={{\n textDecoration: 'none',\n }}\n >\n {metaTitle as string}\n </a>\n </h4>\n <p\n style={{\n margin: 0,\n }}\n >\n {metaDescription as string}\n </p>\n </div>\n </div>\n )\n}\n"],"names":["useAllFormFields","useDocumentInfo","useLocale","useTranslation","React","useEffect","useState","Preview","hasGenerateURLFn","t","locale","fields","docInfo","value","metaDescription","metaTitle","href","setHref","getHref","genURLResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","newHref","json","div","style","color","marginBottom","background","borderRadius","boxShadow","maxWidth","padding","pointerEvents","width","a","textDecoration","h4","margin","p"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AASlD,OAAO,MAAMC,UAAkC,CAAC,EAAEC,gBAAgB,EAAE;IAClE,MAAM,EAAEC,CAAC,EAAE,GAAGN;IAEd,MAAMO,SAASR;IACf,MAAM,CAACS,OAAO,GAAGX;IACjB,MAAMY,UAAUX;IAEhB,MAAM,EACJ,oBAAoB,EAAEY,OAAOC,eAAe,EAAE,GAAG,CAAC,CAAc,EAChE,cAAc,EAAED,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACrD,GAAGJ;IAEJ,MAAM,CAACK,MAAMC,QAAQ,GAAGX;IAExBD,UAAU;QACR,MAAMa,UAAU;YACd,MAAMC,iBAAiB,MAAMC,MAAM,gCAAgC;gBACjEC,MAAMC,KAAKC,SAAS,CAAC;oBACnB,GAAGX,OAAO;oBACVY,KAAK;wBAAE,GAAGb,MAAM;oBAAC;oBACjBD,QAAQ,OAAOA,WAAW,WAAWA,QAAQe,OAAOf;gBACtD;gBACAgB,aAAa;gBACbC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;YACV;YAEA,MAAM,EAAEC,QAAQC,OAAO,EAAE,GAAG,MAAMX,eAAeY,IAAI;YAErDd,QAAQa;QACV;QAEA,IAAItB,oBAAoB,CAACQ,MAAM;YAC7B,KAAKE;QACP;IACF,GAAG;QAACP;QAAQK;QAAMN;QAAQE;QAASJ;KAAiB;IAEpD,qBACE,oBAACwB,2BACC,oBAACA,aAAKvB,EAAE,sCACR,oBAACuB;QACCC,OAAO;YACLC,OAAO;YACPC,cAAc;QAChB;OAEC1B,EAAE,iDAEL,oBAACuB;QACCC,OAAO;YACLG,YAAY;YACZC,cAAc;YACdC,WAAW;YACXC,UAAU;YACVC,SAAS;YACTC,eAAe;YACfC,OAAO;QACT;qBAEA,oBAACV,2BACC,oBAACW;QACC3B,MAAMA;QACNiB,OAAO;YACLW,gBAAgB;QAClB;OAEC5B,QAAQ,+BAGb,oBAAC6B;QACCZ,OAAO;YACLa,QAAQ;QACV;qBAEA,oBAACH;QACC3B,MAAK;QACLiB,OAAO;YACLW,gBAAgB;QAClB;OAEC7B,2BAGL,oBAACgC;QACCd,OAAO;YACLa,QAAQ;QACV;OAEChC;AAKX,EAAC"}
1
+ {"version":3,"sources":["../../src/ui/Preview.tsx"],"sourcesContent":["'use client'\n\nimport type { FormField, UIField } from 'payload/types'\n\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useDocumentInfo } from '@payloadcms/ui/providers/DocumentInfo'\nimport { useLocale } from '@payloadcms/ui/providers/Locale'\nimport { useTranslation } from '@payloadcms/ui/providers/Translation'\nimport React, { useEffect, useState } from 'react'\n\nimport type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'\nimport type { GenerateURL } from '../types.js'\n\ntype PreviewProps = UIField & {\n hasGenerateURLFn: boolean\n}\n\nexport const Preview: React.FC<PreviewProps> = ({ hasGenerateURLFn }) => {\n const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()\n\n const locale = useLocale()\n const [fields] = useAllFormFields()\n const docInfo = useDocumentInfo()\n\n const {\n 'meta.description': { value: metaDescription } = {} as FormField,\n 'meta.title': { value: metaTitle } = {} as FormField,\n } = fields\n\n const [href, setHref] = useState<string>()\n\n useEffect(() => {\n const getHref = async () => {\n const genURLResponse = await fetch('/api/plugin-seo/generate-url', {\n body: JSON.stringify({\n ...docInfo,\n doc: { ...fields },\n locale: typeof locale === 'object' ? locale?.code : locale,\n } satisfies Parameters<GenerateURL>[0]),\n credentials: 'include',\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'POST',\n })\n\n const { result: newHref } = await genURLResponse.json()\n\n setHref(newHref)\n }\n\n if (hasGenerateURLFn && !href) {\n void getHref()\n }\n }, [fields, href, locale, docInfo, hasGenerateURLFn])\n\n return (\n <div>\n <div>{t('plugin-seo:preview')}</div>\n <div\n style={{\n color: '#9A9A9A',\n marginBottom: '5px',\n }}\n >\n {t('plugin-seo:previewDescription')}\n </div>\n <div\n style={{\n background: 'var(--theme-elevation-50)',\n borderRadius: '5px',\n boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',\n maxWidth: '600px',\n padding: '20px',\n pointerEvents: 'none',\n width: '100%',\n }}\n >\n <div>\n <a\n href={href}\n style={{\n textDecoration: 'none',\n }}\n >\n {href || 'https://...'}\n </a>\n </div>\n <h4\n style={{\n margin: 0,\n }}\n >\n <a\n href=\"/\"\n style={{\n textDecoration: 'none',\n }}\n >\n {metaTitle as string}\n </a>\n </h4>\n <p\n style={{\n margin: 0,\n }}\n >\n {metaDescription as string}\n </p>\n </div>\n </div>\n )\n}\n"],"names":["useAllFormFields","useDocumentInfo","useLocale","useTranslation","React","useEffect","useState","Preview","hasGenerateURLFn","t","locale","fields","docInfo","value","metaDescription","metaTitle","href","setHref","getHref","genURLResponse","fetch","body","JSON","stringify","doc","code","credentials","headers","method","result","newHref","json","div","style","color","marginBottom","background","borderRadius","boxShadow","maxWidth","padding","pointerEvents","width","a","textDecoration","h4","margin","p"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAIA,SAASA,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAOC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AASlD,OAAO,MAAMC,UAAkC,CAAC,EAAEC,gBAAgB,EAAE;IAClE,MAAM,EAAEC,CAAC,EAAE,GAAGN;IAEd,MAAMO,SAASR;IACf,MAAM,CAACS,OAAO,GAAGX;IACjB,MAAMY,UAAUX;IAEhB,MAAM,EACJ,oBAAoB,EAAEY,OAAOC,eAAe,EAAE,GAAG,CAAC,CAAc,EAChE,cAAc,EAAED,OAAOE,SAAS,EAAE,GAAG,CAAC,CAAc,EACrD,GAAGJ;IAEJ,MAAM,CAACK,MAAMC,QAAQ,GAAGX;IAExBD,UAAU;QACR,MAAMa,UAAU;YACd,MAAMC,iBAAiB,MAAMC,MAAM,gCAAgC;gBACjEC,MAAMC,KAAKC,SAAS,CAAC;oBACnB,GAAGX,OAAO;oBACVY,KAAK;wBAAE,GAAGb,MAAM;oBAAC;oBACjBD,QAAQ,OAAOA,WAAW,WAAWA,QAAQe,OAAOf;gBACtD;gBACAgB,aAAa;gBACbC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,QAAQ;YACV;YAEA,MAAM,EAAEC,QAAQC,OAAO,EAAE,GAAG,MAAMX,eAAeY,IAAI;YAErDd,QAAQa;QACV;QAEA,IAAItB,oBAAoB,CAACQ,MAAM;YAC7B,KAAKE;QACP;IACF,GAAG;QAACP;QAAQK;QAAMN;QAAQE;QAASJ;KAAiB;IAEpD,qBACE,MAACwB;;0BACC,KAACA;0BAAKvB,EAAE;;0BACR,KAACuB;gBACCC,OAAO;oBACLC,OAAO;oBACPC,cAAc;gBAChB;0BAEC1B,EAAE;;0BAEL,MAACuB;gBACCC,OAAO;oBACLG,YAAY;oBACZC,cAAc;oBACdC,WAAW;oBACXC,UAAU;oBACVC,SAAS;oBACTC,eAAe;oBACfC,OAAO;gBACT;;kCAEA,KAACV;kCACC,cAAA,KAACW;4BACC3B,MAAMA;4BACNiB,OAAO;gCACLW,gBAAgB;4BAClB;sCAEC5B,QAAQ;;;kCAGb,KAAC6B;wBACCZ,OAAO;4BACLa,QAAQ;wBACV;kCAEA,cAAA,KAACH;4BACC3B,MAAK;4BACLiB,OAAO;gCACLW,gBAAgB;4BAClB;sCAEC7B;;;kCAGL,KAACgC;wBACCd,OAAO;4BACLa,QAAQ;wBACV;kCAEChC;;;;;;AAKX,EAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payloadcms/plugin-seo",
3
- "version": "3.0.0-beta.35",
3
+ "version": "3.0.0-beta.36",
4
4
  "description": "SEO plugin for Payload",
5
5
  "keywords": [
6
6
  "payload",
@@ -37,24 +37,29 @@
37
37
  "dist"
38
38
  ],
39
39
  "devDependencies": {
40
- "@types/react": "18.3.2",
41
- "@payloadcms/next": "3.0.0-beta.35",
40
+ "@types/react": "npm:types-react@19.0.0-beta.2",
41
+ "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
42
42
  "@payloadcms/eslint-config": "1.1.1",
43
- "@payloadcms/ui": "3.0.0-beta.35",
44
- "payload": "3.0.0-beta.35",
45
- "@payloadcms/translations": "3.0.0-beta.35"
43
+ "@payloadcms/translations": "3.0.0-beta.36",
44
+ "@payloadcms/next": "3.0.0-beta.36",
45
+ "@payloadcms/ui": "3.0.0-beta.36",
46
+ "payload": "3.0.0-beta.36"
46
47
  },
47
48
  "peerDependencies": {
48
- "react": "^18.2.0 || ^19.0.0",
49
- "react-dom": "^18.2.0 || ^19.0.0",
50
- "@payloadcms/ui": "3.0.0-beta.35",
51
- "@payloadcms/translations": "3.0.0-beta.35",
52
- "payload": "3.0.0-beta.35"
49
+ "react": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
50
+ "react-dom": "^19.0.0 || ^19.0.0-rc-f994737d14-20240522",
51
+ "@payloadcms/translations": "3.0.0-beta.36",
52
+ "@payloadcms/ui": "3.0.0-beta.36",
53
+ "payload": "3.0.0-beta.36"
53
54
  },
54
55
  "publishConfig": {
55
56
  "registry": "https://registry.npmjs.org/"
56
57
  },
57
58
  "homepage:": "https://payloadcms.com",
59
+ "overrides": {
60
+ "@types/react": "npm:types-react@19.0.0-beta.2",
61
+ "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2"
62
+ },
58
63
  "scripts": {
59
64
  "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
60
65
  "build:swc": "swc ./src -d ./dist --config-file .swcrc",