/** @jsx jCreateElement */
import $ from 'jquery';
import { jCreateElement } from './createElement.js';

const App = () => (
  <div className="container">
    <h1>Hello JQX!</h1>
    <button onClick={() => alert('It works!')}>
      Click me
    </button>
  </div>
);

$('#root').append(<App />);

/** @jsx jCreateElement */
import { jCreateElement } from './createElement.js';

const Button = ({ text, onClick }) => (
  <button className="btn btn-primary" onClick={onClick}>
    {text}
  </button>
);

export default Button;

/** @jsx jCreateElement */
import $ from 'jquery';
import { jCreateElement } from './createElement.js';

let count = 0;

const Counter = () => (
  <div className="counter">
    <p>Count: <span id="count">{count}</span></p>
    <button onClick={() => {
      count++;
      $('#count').text(count);
    }}>
      Increment
    </button>
  </div>
);

export default Counter;

/** @jsx jCreateElement */
import $ from 'jquery';
import 'jquery-ui/ui/widgets/draggable';
import { jCreateElement } from './createElement.js';

const DraggableBox = () => {
  const handleMount = (element) => {
    $(element).draggable();
  };

  return (
    <div 
      className="draggable-box"
      ref={handleMount}
    >
      Drag me around!
    </div>
  );
};

export default DraggableBox;

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'classic',
      babel: {
        presets: [['@babel/preset-react', { pragma: 'jCreateElement' }]],
      },
    }),
  ],
});

/** @jsx jCreateElement */