fix: jsx prop with break line (#107)

huozhi · Oct 4, 2024 · 2773f40 · 2773f40
1 parent 1d1aea4
commit 2773f40
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git a/docs/app/editor/page.js b/docs/app/editor/page.js
@@ -0,0 +1,16 @@
+import LiveEditor from '../live-editor'
+
+const code = `\
+<svg>
+ <path 
+ d='M12'/></svg>
+`
+
+export default function Page() {
+ return (
+ <LiveEditor
+ defaultCode={code}
+ enableTypingAnimation={false}
+ />
+ )
+}
diff --git a/docs/app/live-editor.js b/docs/app/live-editor.js
@@ -48,7 +48,14 @@ export default function App() {
 
 `
 
-function useTextTypingAnimation(targetText, delay, onReady) {
+function useTextTypingAnimation(targetText, delay, enableTypingAnimation, onReady) {
+ if (!enableTypingAnimation) {
+ return {
+ text: targetText,
+ isTyping: false,
+ setText: () => {},
+ }
+ }
  const [text, setText] = useState('')
  const [isTyping, setIsTyping] = useState(true)
  const animationDuration = delay / targetText.length
@@ -82,8 +89,8 @@ function useTextTypingAnimation(targetText, delay, onReady) {
 }
 
 const DEFAULT_LIVE_CODE_KEY = '$saved-live-code'
-function useDefaultLiveCode() {
- const [defaultCode, setCode] = useState('')
+function useDefaultLiveCode(defaultCodeText) {
+ const [defaultCode, setCode] = useState(defaultCodeText || '')
 
  useEffect(() => {
  if (defaultCode) return
@@ -99,17 +106,20 @@ function useDefaultLiveCode() {
  }
 }
 
-export default function LiveEditor() {
+export default function LiveEditor({
+ enableTypingAnimation = true,
+ defaultCode = DEFAULT_LIVE_CODE,
+}) {
  const editorRef = useRef()
  const [colorPlateColors, setColorPlateColors] = useState(defaultColorPlateColors)
  const isDebug = process.env.NODE_ENV === 'development'
 
- const { defaultLiveCode, setDefaultLiveCode } = useDefaultLiveCode()
+ const { defaultLiveCode, setDefaultLiveCode } = useDefaultLiveCode(defaultCode)
  const {
  text: liveCode,
  setText: setLiveCode,
  isTyping,
- } = useTextTypingAnimation(defaultLiveCode, 1000, () => {
+ } = useTextTypingAnimation(defaultLiveCode, 1000, enableTypingAnimation, () => {
  if (editorRef.current) {
  // focus needs to be delayed
  setTimeout(() => {

diff --git a/lib/index.js b/lib/index.js
@@ -435,6 +435,11 @@ function tokenize(code) {
  }
  // `=` in property=<value>
  if (next === '=' && !inStringContent()) {
+ // if current is not a space, ensure `prop` is a property
+ if (isSpaces(current)) {
+ append(T_SPACE, current)
+ current = ''
+ }
  const prop = current ? (current + curr) : curr
  if (isIdentifier(prop)) {
  current = prop

diff --git a/test/ast.test.js b/test/ast.test.js
@@ -194,6 +194,22 @@ describe('jsx', () => {
  ])
  })
 
+ it('parse svg with break lines', () => {
+ const code = `\
+ <svg>
+ <path
+ d='M12'/></svg>
+ `
+ const tokens = tokenize(code)
+ expect(extractTokenValues(tokens)).toEqual([
+ '<', 'svg', '>', '<', 'path', 'd', '=', "'", 'M12', "'", '/>', '</', 'svg', '>',
+ ])
+ expect(extractTokenArray(tokens)).toEqual([
+ ["<", "sign"], ["svg", "entity"], [">", "sign"], ["", "jsxliterals"], ["", "jsxliterals"], ["<", "sign"], ["path", "entity"], ["d", "property"],
+ ["=", "sign"], ["'", "string"], ["M12", "string"], ["'", "string"], ["/>", "sign"], ["</", "sign"], ["svg", "entity"], [">", "sign"]
+ ])
+ })
+
  it('parse arrow function in jsx correctly', () => {
  const code = '<button onClick={() => {}}>click</button>'
  const tokens = tokenize(code)